為什麼黏性定位中的「bottom: 0」表現與預期相反？
- Mary-Kate Olsen原創
- 2024-11-26 18:37:11154瀏覽
黏性定位的意外行為：bottom: 0
在探索CSS位置屬性時，開發人員在指定bottom時可能會遇到意外行為： 0 表示黏性定位。根據 MDN 文檔，黏性元素最初被視為相對位置元素，直到滿足指定的閾值，此時它們會切換到固定定位。然而，當指定了bottom: 0時，會發生相反的行為。
預期行為與實際行為
MDN文件建議具有bottom: 0的元素應該是在視口下方時相對，在視口上方時固定。然而，實際的行為是相反的：元素在視口下方時是固定的，在視口上方時是相對的。
解釋
這個差異源自於 MDN 文件的措詞。它指出黏性元素在超過閾值之前被視為相對元素，不一定一開始就被視為相對元素。在底部：0的情況下，從一開始就有效地超過了閾值，因為元素開始於視口底部下方。因此，元素開始時是固定的，當滾動超出其起始點時變得相對。
範例插圖
考慮以下HTML 和CSS 程式碼：
<body>
.a {
margin-top: auto;
position: sticky;
bottom: 0;
}
.b {
position: sticky;
top: 0;
}
在此範例中，元素A 開始時是相對元素A 開始時是相對元素的，向下滾動時變為固定。另一方面，元素 B 一開始是固定的，向上滾動時變得相對。此行為與上述實際行為一致，其中 Bottom: 0 導致一開始就固定定位。
以上是為什麼黏性定位中的「bottom: 0」表現與預期相反？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn