為什麼設定'高度”時'位置：黏性”不起作用？

設定「高度」時「position:sticky」不起作用

正如您所注意到的，在頁腳元素上設置height 屬性當您向下捲動時，防止它黏在頁面頂部。出現此行為的原因是黏性定位演算法的工作方式。

根據 CSS 規範，黏性元素被視為相對定位，直到其包含區塊跨越指定閾值。在您的例子中，包含區塊是 body 元素，其高度為 100%。當高度為 92% 的主元素向下捲動時，頁腳元素到達 body 元素的底部，並被視為位於其包含區塊的相對邊緣。因此，它不再被視為黏性並保留在頁面底部。

要解決此問題，您可以從主元素中刪除 height 屬性。這將允許頁腳元素按預期粘在頁面頂部。或者，您可以將 body 元素的 height 屬性設為 100vh 而不是 100%。這將確保 body 元素始終與視窗高度相同，並且無論主元素的高度如何，頁腳元素都會黏在頁面頂部。

以上是為什麼設定'高度”時'位置：黏性”不起作用？的詳細內容。更多資訊請關注PHP中文網其他相關文章！