滾動框如何影響 CSS 中的黏性定位？

理解CSS 定位佈局模組中的滾動框

CSS 定位佈局模組將黏性定位定義為一種方法，其中相對於最近的祖先計算框的偏移量帶有“滾動框”或視口。然而，滾動框的確切性質引發了一些混亂。

定義的滾動框

滾動框本質上是一個溢出屬性設定為可見以外的值的框。例如，將溢出設為隱藏，會建立一個具有可捲動內容的方塊。

對黏性定位的影響

在黏性定位的上下文中，距離黏性元素最近的滾動框起著至關重要的作用。如果黏性元素的祖先將其溢出設為滾動值，則將相對於該滾動框計算黏性元素的偏移量。

開啟或關閉滾動框

控制是否一個盒子變成了一個滾動盒子，需要相應地設定溢出屬性。將「overflow」設定為「visible」可防止建立捲動框，而將其設為「auto」、「scroll」或「hidden」則會建立一個滾動框。

範例

考慮以下範例：

.wrapper {
  height: 200vh;
  border: 2px solid;
}
.wrapper > div {
  position: sticky;
  top: 0;
  height: 20px;
  background: red;
}

<div class="wrapper">
  <div></div>
</div>

此程式碼建立一個高容器（包裝器）和一個黏性元素（div）在其中。包裝器具有溢出：隱藏，使其成為滾動框。當使用者捲動頁面時，黏性元素將黏在視窗的頂部，直到到達包裝器的頂部。此時，黏性元素將停止滾動，因為它已到達最近的滾動框（包裝器）的頂部。

以上是滾動框如何影響 CSS 中的黏性定位？的詳細內容。更多資訊請關注PHP中文網其他相關文章！