css - position:sticky失效原因及注意點

粘性定位：粘性定位可以被認為是相對定位和固定定位的混合，元素在跨越特定閾值前為相對定位，之后為固定定位

#one { position: sticky; top: 10px; }

在 viewport 視口滾動到元素 top 距離小於 10px 之前，元素為相對定位。之后，元素將固定在與頂部距離 10px 的位置，直到 viewport 視口回滾到閾值以下。

失效原因

瀏覽器支持

除了兼容性問題外，列舉設置粘性定位屬性失效的情況：

1. 在設置粘性定位的時候，一定要指定 top, right, bottom 或 left 四個閾值其中之一，才可使粘性定位生效。否則其行為與相對定位相同。
2. 父元素高度沒子元素高，通常為父元素設置 height:100%;
3. 父元素設置了 overflow 屬性也會使粘性定位失效

父元素不單單指元素直系的父元素，任意引用了次組件的父組件元素也包括