解析position:|解析position: sticky; 解析position:sticky;

是什么粘性定位position sticky元素采用正常的文档流布局（static）,当其边框（border矩形）相对于最近的滚动祖先元素的内边框（即content矩形）的小于指定阈值时，则position sticky元素相对于该最近的滚动祖先元素固定位置。
怎么用要实现粘性定位除了指定position: sticky;外还需指定阈值，即水平滚动必须指定left/right，垂直滚动必须指定top/bottom。
如：

.some-component{ position: sticky; top: 0px; }

粘性定位position sticky可用于实现一些“吸顶”效果
进阶阈值怎么计算的

文章图片

比如：

.sticky-btn{ position: sticky; top: 10px; }

则表示.sticky-btn元素的上border矩形边框距离滚动容器的上内边框（即content矩形）边的距离小于10px时，则元素固定位置。
多个sticky元素

在一个滚动容器里可以存在多个有效的sticky元素，sticky元素之间的行为互相独立；
sticky元素属于定位元素，当多个sticky元素发生重叠时遵循定位元素的重叠原则。

其他

失效的sticky元素行为同relative定位。

失效的sticky元素初次使用

position: sticky;

总是发现没有达到效果，常见的原因有：

水平滚动时检查是否指定left/right；
垂直滚动是检查是否指定top/bottom；
sticky元素的某个父元素（或者祖先元素）指定了overflow/overflow-x/overflow-y属性，且取值是hidden/scroll/auto；
sticky元素的父元素（不是祖先元素）在滚动元素视口里还不可见。
可以看看这个Demo

兼容性 Can I Use CSS position: sticky