CSS中position属性（sticky）

我不是最后一个知道的：position: sticky

position的含义是指定位类型，取值类型可以有：static、relative、absolute、fixed、inherit和sticky，这里sticky是CSS3新发布的一个属性。

关于这里只讲述sticky的用法，关于sticky：

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

在web开发中注意兼容性：

sticky目前仍是一个试验性的属性，并不是W3C推荐的标准。它之所以会出现，也是因为监听scroll事件来实现粘性布局使浏览器进入慢滚动的模式，这与浏览器想要通过硬件加速来提升滚动的体验是相悖的。具体情况可以看下图，基本上可以说这个属性使用的浏览器只有FireFox和iOS的Safari

小程序自定义导航栏中使用sticky:

sticky是可以再小程序端生效的！
亲测这个属性在自定义导航时特别适用，我也是在纠结自定义导航的fixed适配占位问题时才了解到这个属性。

position的属性你真的全知道吗

原文：https://www.cnblogs.com/wsj1/p/12710485.html