為什麼黏性定位的行為與 MDN 文檔描述的不同？

仔細檢查黏性位置行為的差異

MDN 文件將黏性定位描述為一個屬性，該屬性將元素從相對位置轉換為固定位置一次超過了定義的閾值。然而，在實踐中，它的行為有所不同。這種差異源自於對這些狀態實現順序的誤解。

根據 MDN，黏性位置元素最初的行為類似於相對位置元素，直到超過閾值。然而，在指定了bottom:0的上下文中，在初始狀態下已經超過了閾值。結果，元素直接進入其固定位置並保持原樣，直到元素的位置距離視口底部超過 0px。

了解粘性位置狀態

Position:sticky 有兩種不同的狀態：

1. 相對狀態：元素的行為類似相對定位的物件。
2. 固定狀態： 元素黏附在視口的固定位置。

初始狀態由元素的位置和定義的閾值決定。在bottom:0的情況下，閾值立即被超過，導致初始固定狀態。當視窗滾動時，元素將保持固定，直到距底部邊緣的距離大於 0px。此時，它恢復到其相對狀態。

說明行為

考慮以下程式碼片段：

body {
  height:150vh;
  margin:0;
  display:flex;
  flex-direction:column;
  border:2px solid;
  margin:50px;
}

.b {
  margin-top:auto;
  position:sticky;
  bottom:0;
}

.a {
  position:sticky;
  top:0;
}

<div class="a"> 
  I will start relative then I will be fixed
</div>
<div class="b"> 
  I will start fixed then I will be relative
</div>

top:0 的元素A 最初會表現為相對行為，並在到達視窗頂部時轉換為固定。元素 B，底部：0，將立即從固定位置開始，並在距離視窗底部的距離超過 0px 時過渡到相對位置。

以上是為什麼黏性定位的行為與 MDN 文檔描述的不同？的詳細內容。更多資訊請關注PHP中文網其他相關文章！