CSS position 详解

CSS 中的 position 属性用来设置元素的定位方式。

position 的值有 staticrelativeabsolutefixedsticky,默认值为 staticposition 值为 relativeabsolutefixedsticky 的元素成为定位元素,toprightbottomleft 属性为被定位元素指定位置。

static

position 属性值为 static 的元素使用正常的布局行为,toprightbottomleftz-index 属性无效。

relative

position 属性值为 relative 的元素被称为相对定位元素。相对定位元素相对于未设置 position 属性为 relative 时该元素的位置进行定位。其位置调整是在不改变页面布局的前提下调整的,也就是说其原始位置会留下空白。

absolute

position 属性值为 absolute 的元素被称为绝对定位元素。绝对定位元素相对于最近的非 static 祖先元素进行定位,如果不存在这样的祖先元素,则相对于根元素进行定位。与相对定位元素不同的是,绝对定位元素脱离了文档流,在文档流中不占据空间。

注意,如果同时指定了 topbottom(非 auto),优先采用 top;如果同时指定了 leftright,优先采用 left

fixed

position 属性值为 fixed 的元素被称为固定定位元素。固定定位元素相对于浏览器窗口进行定位,其位置不随页面滚动而发生变化。与绝对定位元素相同,固定定位元素也脱离了文档流,在文档流中不占据空间。

sticky

IE 和 Edge 浏览器不支持此属性值!

position 属性值为 sticky 的元素被称为粘性定位元素。粘性定位是相对定位和固定定位的混合,元素在跨越特定阈值前为相对定位,之后为固定定位。例如下面代码中的 box 元素,它在距离浏览器窗口上边距离大于 20px 时为相对定位,随着页面的滚动而滚动,当距离等于 20px 后,就会变为固定定位,其位置将不会继续随着页面滚动而变化。

1
2
3
4
5
6
7
.box {
width: 50px;
height: 50px;
background-color: red;
position: sticky;
top: 20px;
}

注意,只有指定了 toprightbottomleft 其中之一,粘性定位才会生效,否则和相对定位效果相同。