粘性定位元素position:sticky的使用

简介

position: sticky是相对定位position: relative和固定定位position:fixed的结合.
元素根据正常文档流进行定位，然后相对它的最近滚动祖先和最近块级祖先，包括 table-related 元素，基于top, right, bottom, 和 left的值进行偏移。偏移值不会影响任何其他元素的位置。
而后，元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

生效规则

position:sticky 的生效是有一定的限制的，总结如下：

1. 须指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

• 如果 top 和 bottom 都被指定（严格来说，这里指定的值不能为 auto ），top 优先。
• 如果指定了 left 和 right ，当 direction设置为ltr（水平书写的中文、英语）时 left 优先，当direction设置为 rtl（阿拉伯语、希伯来语、波斯语由右向左书写）时 right 优先。

2. 设定为 position:sticky 元素的任意父节点的 overflow 属性必须是 visible，否则 position:sticky 不会生效。

• 一个 sticky 元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上（当该祖先的overflow 是 hidden, scroll, auto, 或 overlay时，position:sticky 元素不会有滚动然后固定的情况。），即便这个祖先不是最近的真实可滚动祖先

3. 达到设定的阀值。也就是设定了 position:sticky 的元素表现为 relative 还是 fixed 是根据元素是否达到设定了的阈值决定的。

参考文档：

1. position:stickyMDN文档
2. 使用 position:sticky 实现粘性布局（这个博主得比较详细）