為什麼「bottom: 0」的黏性定位與 MDN 文檔相比會表現出相反的行為？

了解黏性定位的相反行為

在MDN 文件中，黏性定位被描述為相對定位和固定定位的混合，其中元素的行為類似於相對定位的元素，直到超過閾值，之後它表現為固定位置元素。然而，當為黏性定位指定bottom: 0時，行為似乎相反。

粘性定位的機制

根據MDN，粘性位置元素與兩種狀態：

1. 相對模式： 元素相對於其容器或靜態父元素的流定位。
2. 固定模式： 元素相對於視口定位，保持在固定位置。

當指定的閾值達到時，這些狀態之間的轉換就會發生

場景說明

考慮以下範例：

<div class="container">
  <header></header>
  <main></main>
  <footer>
    <div class="footer"></div>
  </footer>
</div>

body {
  margin: 0;
}

.container {
  display: flex;
  height: 100vh;
}

.container>* {
  width: 100%;
}

footer {
  background: #faa;
  position: sticky;
  bottom: 0;
}

.footer {
  background: #aff;
  height: 100vh;
}

當頁腳元素指定Bottom: 0 時，它最初以固定狀態啟動，因為從一開始就超過了閾值（視口的底部）。向下捲動時，仍然超過閾值，因此頁腳保持在固定位置。

但是，當頁腳元素到達閾值（視口底部）時，它會轉換為相對模式，因為不再超過閾值。這與 MDN 文件的建議相反，MDN 文件指出當元素距離視口底部小於 0 像素時應該會發生轉換。

語言誤解

歧義源自於 MDN 文件中所使用的語言。 「直到超過閾值」的說法意味著相對狀態是黏性定位的起始狀態。然而，情況並非總是如此。如果元素在聲明為黏性時已經超過閾值，則它將開始處於固定狀態。

結論

了解黏性定位的兩種狀態以及何時轉換它們之間發生的情況對於有效使用它至關重要。當最初超過閾值時，MDN 文件中描述的行為可以逆轉，從而導致與預期不同的行為。

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