position:sticky

sticky 英文字面意思是粘，粘貼，所以姑且稱之為粘性定位。下面就來了解下這個處於實驗性的取值的具體功能及實用場景。

這是一個結合了 position:relative 和 position:fixed 兩種定位功能於一體的特殊定位，適用於一些特殊場景。

什麼是結合兩種定位功能於一體呢？

元素先按照普通文檔流定位，然後相對於該元素在流中的 flow root（BFC）和 containing block（最近的塊級祖先元素）定位。

而後，元素定位表現為在跨越特定閾值前為相對定位，之後為固定定位。

這個特定閾值指的是 top, right, bottom 或 left 之一，換言之，指定 top, right, bottom 或 left 四個閾值其中之一，才可使粘性定位生效。否則其行為與相對定位相同。

當然，這個屬性的兼容性也不是很好，所以如果你設置了position: sticky而不起作用的話，首先應當想到的是瀏覽器的兼容性問題，如果不是兼容性的問題，還有以下幾種情況會導致這個屬性失效

就是父元素的overflow屬性值為：hidden auto scroll 或body height:100% 時，

解決方法：父元素不使用以上屬性或子元素不使用position:sticky

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！