溢出如何影響 CSS 定位佈局模組層級 3 中的黏性定位？

CSS 定位版面模組等級3 中的捲動框

CSS 定位版面模組層級3 定義了黏性定位，這與行為類似相對定位的盒子。但是，偏移量是根據具有滾動框的最近祖先計算的，如果沒有祖先具有滾動框，則根據視口計算偏移量。

什麼是滾動框？

捲動框是溢位值設定為可見（預設）以外的值的方塊。這是基於先前的文檔，其中由於溢出而出現了粘性元素的問題。

溢出對黏性定位的影響

如果具有溢出：隱藏的元素是祖先的位置：黏性元素，後者的偏移量將根據具有隱藏溢出的祖先框來計算。因此，滾動行為將受到限制，從而防止黏性元素可見。

程式碼範例

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

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

以上是溢出如何影響 CSS 定位佈局模組層級 3 中的黏性定位？的詳細內容。更多資訊請關注PHP中文網其他相關文章！