為什麼我的帶有'bottom:0”的粘性元素看起來沒有粘住？

理解CSS 黏性定位及其頂部和底部的行為

CSS 黏性定位允許元素在其包含塊中保持固定，直到越過特定的閾值，然後它就變得相對定位。但是，在黏性元素中使用 'bottom: 0' 時似乎存在差異。

問題說明：

考慮以下程式碼：

<div class="block">
  <div class="move">
  </div>
</div>

.block {
  background: pink;
  width: 50%;
  height: 200px;
}

.move {
  position: sticky;
  bottom: 0;
}

當「move」設定為「top:0」時，黏在粉紅色塊的頂部，表現如預期。然而，當“move”設定為“bottom:0”時，它似乎變得分離並且不再保持固定。

理解「bottom: 0」與黏性元素的行為：

要理解這種行為，掌握黏性的定義至關重要定位：

A stickily positioned element remains relatively positioned until its containing block crosses a specified threshold (such as setting 'top' to a value other than 'auto'), after which it becomes 'stuck' until meeting the opposite edge of its containing block.

在「bottom: 0」的情況下，黏性元素不可見，因為它黏在其包含塊的底部邊緣。當滾動位置超過閾值時，包含區塊向上移動，但黏性元素保持固定在底部邊緣。由於黏性元素已經位於底部，因此它無法進一步向上移動。

要觀察黏性行為，請確保包含塊有足夠的高度來容納黏性元素。透過為塊元素提供顯著的上邊距，您可以滾動頁面並看到粘性元素粘附在底部

以上是為什麼我的帶有'bottom:0”的粘性元素看起來沒有粘住？的詳細內容。更多資訊請關注PHP中文網其他相關文章！