為什麼黏性定位中的「bottom: 0」表現與預期相反？

黏性定位的意外行為：bottom: 0

在探索CSS位置屬性時，開發人員在指定bottom時可能會遇到意外行為： 0 表示黏性定位。根據 MDN 文檔，黏性元素最初被視為相對位置元素，直到滿足指定的閾值，此時它們會切換到固定定位。然而，當指定了bottom: 0時，會發生相反的行為。

預期行為與實際行為

MDN文件建議具有bottom: 0的元素應該是在視口下方時相對，在視口上方時固定。然而，實際的行為是相反的：元素在視口下方時是固定的，在視口上方時是相對的。

解釋

這個差異源自於 MDN 文件的措詞。它指出黏性元素在超過閾值之前被視為相對元素，不一定一開始就被視為相對元素。在底部：0的情況下，從一開始就有效地超過了閾值，因為元素開始於視口底部下方。因此，元素開始時是固定的，當滾動超出其起始點時變得相對。

範例插圖

考慮以下HTML 和CSS 程式碼：

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

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

在此範例中，元素A 開始時是相對元素A 開始時是相對元素的，向下滾動時變為固定。另一方面，元素 B 一開始是固定的，向上滾動時變得相對。此行為與上述實際行為一致，其中 Bottom: 0 導致一開始就固定定位。

以上是為什麼黏性定位中的「bottom: 0」表現與預期相反？的詳細內容。更多資訊請關注PHP中文網其他相關文章！