CSS 粘性定位position sticky 用法实践

sticky

css属性position为sticky的元素，根据正常的文档流（flow of the document）进行定位，然后相对它的最近滚动祖先（nearest scrolling ancestor）和 containing block (最近块级祖先 nearest block-level ancestor)，包括table-related元素，基于top, right, bottom, 和 left的值进行偏移。该偏移量不会影响任何其他元素的位置。

sticky元素总是创建一个新的层叠上下文（stacking context） ，一个sticky元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上（当该祖先的overflow 是 hidden, scroll, auto, 或 overlay时），即便这个祖先不是最近的真实可滚动祖先。（Github issue on W3C CSSWG）

参考链接：