CSS position 详解

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

position 的值有 static、relative、absolute、fixed 和 sticky，默认值为 static，position 值为 relative、absolute、fixed 或 sticky 的元素成为定位元素，top、right、bottom 和 left 属性为被定位元素指定位置。

static

position 属性值为 static 的元素使用正常的布局行为，top、right、bottom、left 和 z-index 属性无效。

relative

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

absolute

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

注意，如果同时指定了 top 和 bottom（非 auto），优先采用 top；如果同时指定了 left 和 right，优先采用 left。

fixed

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

sticky

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

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

.box {
  width: 50px;
  height: 50px;
  background-color: red;
  position: sticky;
  top: 20px;
}

注意，只有指定了 top、right、bottom 或 left 其中之一，粘性定位才会生效，否则和相对定位效果相同。