【每日一题】说说CSS的position属性-技术圈

人生苦短，总需要一点仪式感。比如学前端～

目录：

概念
position 属性值

static （默认值）
relative 相对定位
absolute 绝对定位
fixed 固定定位
sticky 粘性定位
initial 使用默认值
inherit 继承

概念

position 属性把元素放置到一个“静态的/相对的/绝对的/固定的”位置中。

position 属性值

position 的属性值共有四个常用的：static、relative、absolute、fixed。
还有不常用的：inherit、initial、sticky

static （默认值）

是 position 的默认值，一般不设置 position 属性时，元素会按照正常的文档流进行排列。

relative 相对定位

主要重点回答“它是相对哪个对象来进行偏移的”，答案是“按照它原本的位置”。也就是 “相对自身进行偏移”。

需要注意的是，相对定位不会脱离文档流，原来的位置仍然被保留。

absolute 绝对定位

它是相对“不是 static 的、最近一级元素”来进行定位的，如果没有这样的元素，那么相对 body 元素来进行定位，被定位元素会脱离文档流，然后我们可以通过left、right、top、bottom来调整元素的位置。

或者换句话理解：假设一个 div 元素，它所有的父级元素属性都是 position：static，也就是所有父级元素都没有设置 position，那么这个 div 就会相对 body 元素来进行定位。
如果这个 div 元素存在某一个父级元素设置了除 static 以外的 position，那么这个 div 就会相对这个父元素来进行定位。

fixed 固定定位

固定定位是最好理解的，它相对浏览器的窗口进行定位并脱离文档流，即使拖动滚动条，元素的位置也是不变的，我们使用浏览器时一些广告效果就是这样的。

sticky 粘性定位

position 设置 sticky 的元素，在屏幕范围时该元素的位置并不受到定位影响(设置是 top、left 等属性无效)，当该元素的位置将要移出偏移范围的时候，定位又会变成 fixed，根据设置的 left、top 等属性成为固定位置的效果。

可以用来做这种固钉效果：https://ant.design/components/affix-cn/

向上滚动一段距离：

sticky 属性有以下几个特点：

该元素并不脱离文档流，仍然保留元素原本在文档流中的位置。
该元素在容器中被滚动超过指定的偏移量时，元素在容器内固定在指定的位置。例如你设置了 top：50px，那么在 sticky 元素到达距离相对定位的元素顶部 50px 的位置时固定，不再向上移动。
元素固定的相对偏移量是相对离它最近的具有滚动框的祖先元素，如果祖先元素都不可滚动，那么相对于 viewport 来计算元素的偏移量，

但是这个属性的兼容性还不是很友好，需要注意一下。