為什麼 `bottom:0` 沒有讓我的 `position:sticky` 元素立即黏住？

為什麼「bottom:0」似乎不適用於Position:Sticky

當嘗試將「bottom:0」與「position:sticky ”，最初可能會出現該元素沒有變得粘性的情況。然而，事實並非如此。為了理解這種行為，讓我們檢查一下「sticky」的定義。

根據 CSS 規範，具有「position:sticky」的元素保持相對定位，直到其包含區塊跨越閾值。在這種情況下，包含塊是粉紅色的“塊”元素。

設定「bottom:0」時，當包含區塊的底部在瀏覽器視窗中可見時，「移動」元素將變得黏性。但是，在您的測試程式碼中，「block」元素的高度為 200px，「move」元素放置在其中。這意味著預設情況下，「移動」元素已經位於其包含區塊內可見區域的底部。因此，它永遠不會遇到黏性所需的閾值。

為了示範「bottom:0」如何與「position:sticky」搭配使用，我們可以為「block」元素提供較大的邊距，移動它從螢幕上消失了。一旦我們開始滾動，我們可以觀察到當“block”元素滾動經過瀏覽器視窗頂部時，“move”元素開始粘在可見螢幕的底部。

以上是為什麼 `bottom:0` 沒有讓我的 `position:sticky` 元素立即黏住？的詳細內容。更多資訊請關注PHP中文網其他相關文章！