CSS 的 position 值中，有一個非常有用的值 --position: sticky，通常會被用于各種吸頂，吸底，吸邊的效果中。

如果你對sticky還不太熟悉，可以先看看我的這篇文章：使用 position:sticky 實現粘性布局，當然，這篇文章里面有稍微探討position: sticky生效或者說失效的規則，但是不太充分。

最近遇到一些position-sticky失效的場景，所以總結了一下。

position-sticky 生效的原理

在 W3 官方文檔中的定義是：Sticky positioning is similar to relative positioning except the offsets are automatically calculated in reference to the nearest scrollport.

轉換成通俗的大白話就是，Sticky 定位類似于相對定位，（當它表現為 fixed 定位的特性時）會根據最近的滾動容器（nearest scrollport）自動計算偏移量。

其中有一個非常重要的概念就是 nearest scrollport，它表示 sticky 元素在即將消失前會相對它最近的 scrollport 去做定位。

正常的 DEMO

所以正常而言，類似下面的這種情況，sticky 是可以正常展示的。

<div class="container"> - 可滾動的容器 scrollport     
    <div class="sticky">   - 設置了 sticky 的元素

CodePen Demo -- Normal Sticky Demo

失效的 position: sticky

1、包裹的父容器高度與 sticky 元素一致

有趣的是，如果在.sticky元素和你希望.sticky生效吸附的滾動元素中間，添加上一層.parent的 div 元素，不給 div 添加任何樣式，sticky 則失效了。

譬如是這樣：

<div class="container">      - 可滾動的容器 scrollport     
    <div class="parent"> 
         <div class="sticky">   - 設置了 sticky 的元素

CodePen Demo -- invalid Sticky Demo 1

失效原因：此時.sticky元素的最近的 scrollport 變成了它的父容器 div，而父容器 div 的高度和.sticky元素的高度是一樣的，所以表現不出 fixed 的特性。

其實，這里不算失效，我們只需要將包裹.sticky元素的父容器的高度設置的大于.sticky元素本身，也能看到效果。

譬如，我們可以加上

.parent {
    height: 100vh;
}

此時，sticky將重新生效，像是這樣：

其實，造成這種現象的本質原因是，設置了position: sticky的元素吸附的基準元素從.container變成了.parent。

2、包裹的父容器設置了overflow: hidden

第二種情況，也會導致position: sticky的 fixed 定位特性失效。也就是.sticky元素的祖先容器存在 overflow: hidden。類似這樣

<div class="container">      - 可滾動的容器 scrollport     
    <div class="hidden">      - 設置了 overflow: hidden
         <div class="sticky">   - 設置了 sticky 的元素

CodePen Demo -- invalid Sticky Demo 2

在上面這個 DEMO 里面，設置了sticky的元素的父元素hidden元素，它的高度是遠比stikcy元素高的，但是滾動的過程中卻沒有表現出 fixed 的特性。

原因在于，設置了overflow: hidden的元素，它不再代用滾動的特性，當sticky元素吸附于.hidden元素的頂部時，它隨著.hidden` 元素本身在 container 移動。所以，所有的 sticky 元素都會被滾動出 container 的滾動區域。

當然，這里有一點比較奇怪的是，.sticky元素相對.hidden元素進行 fixed 定位，而不是相對.container元素進行 fixed 定位，表面設置了overflow: hidden的元素，它也是一個 scrollport。

其實，不止是overflow: hidden，設定為position: sticky元素的任意父節點的 overflow 屬性必須是 visible，否則position:sticky不會生效。

總結一下

看完上面幾個 DEMO，可以好好總結一下position:sticky的生效規則，明白了生效規則就會知道為什么有的時候設定的sticky會失效：

須指定 top, right, bottom 或 left 四個閾值其中之一（且達到設定的閾值），才可使粘性定位生效。否則其行為與相對定位相同；

并且 top 和 bottom 同時設置時，top 生效的優先級高，left 和 right 同時設置時，left 的優先級高

設定為position: sticky的元素的任意父節點的 overflow 屬性必須是 visible，否則position:sticky不會生效；在滿足上述情況下，設定了position: sticky的元素的父容器的高度必須大于當前元素，否則也會失效。（當然，此時，sticky吸附的基準元素就會變成父元素）

如果 position: sticky 元素的任意父節點定位設置為 position: overflow，則父容器無法進行滾動，所以 position:sticky 元素也不會有滾動然后固定的情況

在滿足上述情況下，設定了position: sticky的元素的父容器的高度必須大于當前元素，否則也會失效。（當然，此時，sticky吸附的基準元素就會變成父元素）

最后

好了，本文到此結束。

更多精彩 CSS 技術文章匯總在我的Github -- iCSS，持續更新，歡迎點個 star 訂閱收藏。

如果還有什么疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。

總結

以上是生活随笔為你收集整理的探究 position-sticky 失效问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。