為什麼 `position: Sticky` 和 `bottom: 0` 的行為與 MDN 的描述相反？

position: Sticky with Bottom: 0 的相反行為

當指定position: Sticky with Bottom: 0 時，其行為與定義不同由MDN 提供。與描述不同的是，元素最初被視為相對定位，直到超過閾值並變得固定，而指定 Bottom: 0 時則相反。

在提供的程式碼範例中：

<footer>
  <div class="footer"></div>
</footer>

footer {
  position: sticky;
  bottom: 0;
}

MDN 規定頁腳元素應該先相對定位，直到它距離視窗底部移動小於 0px。然而，觀察到的行為是相反的：

• 向下滾動時： 頁腳開始時為固定定位，然後當頁腳底部到達距底部0px 時變為相對定位
• 向上捲動時：頁尾開始時為相對定位，然後在以下情況下變為固定定位頁腳底部距離視口底部超過 0px。

相反行為的原因

理解這種行為的關鍵在於MDN 定義的措詞：「視為相對位置元素直到指定的閾值是超出。在bottom: 0的情況下，頁面載入時頁腳已經位於視窗的底部。因此，它開始於“固定”狀態，因為已經超過了閾值（距離底部 0px）。

結論

因此，在指定位置時： Sticky with Bottom: 0，元素最初將被固定定位，並在元素移過視口底部時過渡到相對位置。此行為與 MDN 文件中描述的行為相反，因為初始位置由 HTML 結構和與指定閾值的接近程度決定。

以上是為什麼 `position: Sticky` 和 `bottom: 0` 的行為與 MDN 的描述相反？的詳細內容。更多資訊請關注PHP中文網其他相關文章！