CSS position属性

参考：https://zhuanlan.zhihu.com/p/34486016

position 属性规定元素的定位类型

这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

1. 固定定位 fixed

fixed 元素脱离正常的文档流，所以它与 absolute 元素很相似，同样会被周围元素忽略，支持 top, bottom, left, right 属性，但 fixed 元素正如它的名字一样，它是固定在屏幕的某个位置，它不会随着浏览器滚动条的滚动而一起滚动。比如我们常见的回到顶部的功能，按钮一直在浏览器的左下方，不管滚动条如何滚动，该按钮都会在左下方的固定的位置，这个需求就可以使用 position: fixed 来完成。

但需要注意的是，position: fixed 是有兼容性问题的，不支持 IE6、IE7、IE8。

小结：脱离文档流。相对于浏览器窗口进行定位。

2. 相对定位 relative

相对定位，相对于自己的初始位置，不脱离文档流。也就是说元素框偏移某个距离，元素仍保持其未定位前的形状，它原本所占的空间仍保留。

举个例子，html 结构如下：

<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>

div {
    width: 100px;
    height: 100px;
}
.div1 {
    background: #ffff00;
}
.div2 {
    background: #00ff00;
    position: relative;
    top: 40px;
    left: 40px;
}
.div3 {
    background: #0000ff;
}

图片说明

其中红色框为 div2 的初始位置，由于 div2 设置了 position: relative; top: 40px; left: 40px; ，所以该元素相对于自己的初始位置的上面 40px、左边 40px。同时，其他元素的位置未被改变。

小结：不脱离文档流，相对于自己的初始位置。

3. 绝对定位 absolute

绝对定位的元素的位置相对于 static 定位以外的最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。

例子中我们把div2的样式稍作改动

.div2 {
    background: #00ff00;
    position: absolute;
    top: 40px;
    left: 40px;
}

图片说明

由于 div2 的祖先元素都没有定位，所以相对于最初的包含块也就是 body，同时由于绝对定位脱离文档流，所以div3占了div2原来的位置。

小结：脱离文档流，相对于最近的已定位祖先元素。

4. 粘性定位 sticky

sticky 的本意是粘贴，可以称之为粘性定位，但在 css 中的表现更像是吸附。这是一个结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位。常见的吸顶、吸底（网站的头部返回栏，底部切换栏之类）的效果用这个属性非常适合。例如下面淘宝这个效果

图片说明

当元素距离页面视口（Viewport，也就是fixed定位的参照）顶部距离大于 0px 时，元素以 relative 定位表现，而当元素距离页面视口小于 0px 时，元素表现为 fixed 定位，也就会固定在顶部。

5. 默认定位 static

默认值。没有定位，元素出现在正常的流中（忽略top, bottom, left, right 或者z-index 声明）。元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。

6. inherit

规定应该从父元素继承 position 属性的值

注意

  • 须指定 top、right、bottom、left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。 并且 top 和 bottom 同时设置时，top 生效的优先级高，left 和 right 同时设置时，left 的优先级高。
  • 设定为 position:sticky 元素的任意父节点的 overflow 属性必须是 visible，否则 position:sticky 不会生效。如果 position:sticky 元素的任意父节点定位设置为 overflow:hidden，则父容器无法进行滚动，所以 position:sticky 元素也不会有滚动然后固定的情况。如果 position:sticky 元素的任意父节点定位设置为 position:relative | absolute | fixed，则元素相对父元素进行定位，而不会相对 viewport 定位。
  • 达到设定的阀值，也就是设定了 position:sticky 的元素表现为 relative 还是 fixed是根据元素是否达到设定了的阈值决定的。