在 CSS 中,position 是实现元素定位的一种重要方式。使用定位的元素层叠级别比浮动会更高,采用定位来控制元素位置会更加容易。
一般我们使用定位,是通过使用定位模式和边偏移量来确定元素位置的。
定位模式一共有如下:
- static
- relative
- absolute
- fixed
- sticky
- inherit
偏移量就是 top right bottom left 的值,指定到上 右 下 左各基准边的值。
其中 inherit 指定元素从父元素继承 position 的值,存在兼容性的问题,在实际中并不使用。其他 position 值下面我们来逐个介绍并配上实例。
static 静态定位
static 是默认的定位方式,如果元素不写 position 属性,那么其实就是 static 定位的,元素还是按原本的排列方式放置,并不具有特殊性。设置 top bottom left right 以及 z-index 是无效的。
relative 相对定位
relative 是相对定位,要注意是相对元素本该在的位置。也就是说,如果一个元素设置了相对定位,并设置了偏移值,那么这个偏移是相对它本该在的位置而言的。
查看如下的代码,盒子 one 和盒子 two 本来是一起竖直放置的:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.one {
background-color: green;
}
.two {
background-color: indianred;
}
.one,
.two {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
</body>
效果如下:
但是如果我们给盒子 one 加上相对定位 position: relative; 和一个偏移量 top:50px; left:50px;
.one {
position: relative;
top: 50px;
left: 50px;
background-color: green;
}
那么效果将会是如下:
(图中的灰色的原本的绿色盒子 one 的位置)
可以看出,盒子 one 相对与原本没有定位时候的位置偏移了,偏移的量就是我们设置的距离左边 50px, 距离顶部 50px 。而且,下面的盒子 two 的位置并不影响,并不会去占据盒子 one 的位置。
所以相对定位的盒子的特性:
- “相对”是相对于没有定位时原本所在的位置
- 原来的位置依然保留,其他区域的盒子并不受影响
absolute 绝对定位
绝对定位是以最近的带有定位的上级元素来确定位置的。(这里的上级元素包括直接父级元素,爷爷级的元素或者更高层级的元素)
实例:
如下的盒子中,我们如果希望将黄色的盒子放在灰色线所在的位置,那么怎么做呢?
这是两个上面盒子的代码:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.one {
width: 200px;
height: 200px;
margin: 100px;
background-color: green;
}
.in {
width: 100px;
height: 100px;
background-color: orange;
}
</style>
</head>
<body>
<div class="one">
<div class="in"></div>
</div>
</body>
</html>
如果你在里面的盒子 in 加上绝对定位,并给定偏移值,像这样:
.in {
position: absolute;
top:0px;
left: 50px;
width: 100px;
height: 100px;
background-color: orange;
}
那么得到的结果其实是:
发现黄色盒子并不在绿色盒子里面,那么这是为什么呢,其实这是因为给了绝对定位的盒子会向上级元素查找,直到找到具有定位的父级元素来作为基准确定位置。如果一直没有找到。那么就会以浏览器 (Document )来定位。
然而,我们应该以父级盒子 one 为基准进行定位,那么就应该给 one 一个定位,所以,我们还需要给 one 加上定位 posiion:relative;
至于为什么是给 relative,因为其他定位都可能产生副作用,relative 是最合适的。[ 这里父元素给 static 相当于没有定位,给 absolute 会继续向上找定位的父级,fixed 固定在窗口,其他定位特性更加不合适或者会影响本身]
.one {
position: relative;
width: 200px;
height: 200px;
margin: 100px;
background-color: green;
}
如此便可以实现:
当给一个元素添加绝对定位的时候,如果它后面还有其他非定位的元素,那么其他元素是会占据它的原本位置的,这一点是区别于相对定位的。而且,如果子元素需要相对直接父元素进行定位,那么最好给父元素一个 relative 定位。
fixed 固定定位
相比之下,fixed 布局就要简单的多。我们常见的页面中,在滚动的时候,会有一部分是始终在窗口中的,比如网页广告,当你打开窗口,不论你怎么滚动,它就是始终都在某个角落固定。
它的定位基准其实就是浏览器窗口, 所以,其实可以看作是一种特殊的绝对定位。
「注意⚠️:Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持。」
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
p.fixed {
position: fixed;
top: 30px;
right: 5px;
}
</style>
</head>
<body>
<p class="fixed">这里被固定定位了,不随页面滚动</p>
<p><b>注意:</b> IE7 和 IE8 支持只有一个 !DOCTYPE 指定固定值.</p>
<p>AAA</p>
<p>AAA</p>
<p>AAA</p>
...
</body>
</html>
sticky 粘性定位
粘性定位结合了 relative 和 fixed 的特性,可以说是根据用户的滚动在相对定位和固定定位之间切换。元素在滑动超出指定的偏移值之前是相对定位,在超出之后就成了固定定位了。
「注意⚠️:Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix」
比如,下面指定了 top 为 0。如果class="sticky"的 p 元素一直随着页面滑动,该 p 元素会到上面, top 成为负值。所以,在超出前,会跟着页面滑动,但在超出后,就成了 fixed 固定定位固定在页面顶端。这便是 sticky 定位。
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
.sticky {
position: -webkit-sticky;
position: sticky;
top: 0px;
padding: 5px;
background-color: orange;
border: 2px solid #4CAF50;
}
</style>
</head>
<body>
<p>滚动页面</p>
<p class="sticky">注意: IE/Edge 15 及更早 IE 版本不支持 sticky 属性。</p>
<div style="padding-bottom:1000px">
<p>滚动</p>
<p>来回滚动</p>
<p>滚动</p>
<p>来回滚动</p>
<p>滚动</p>
<p>来回滚动</p>
</div>
</body>
</html>
至此,CSS position 的内容就到这里了,其中 relative 和 absolute 是用的最多的定位方式,且实际有许多布局技巧,再做分享!