CSS 定位中的滾動框由什麼決定？

理解CSS 定位中的滾動框

「滾動框」的概念出現在CSS 定位佈局模組第3 級（工作草案）中，特別是在黏性定位的背景下。該定義指出，如果不存在這樣的祖先，則黏性定位框的偏移量是相對於具有滾動框或視口的最近祖先計算的。

定義滾動框

儘管草稿中使用了這個術語，但 CSS 中其他地方卻缺乏準確的定義。但是，根據現有資訊，滾動框可以理解為：

• 「overflow」屬性值設定為「visible」（預設值）以外的值的方塊。

這種理解與溢出問題可能影響黏性元素行為的範例相符。

識別滾動框

在實踐中，切換開啟或關閉某個框是否為滾動框可以透過修改「overflow」屬性來實現。例如：

• 如果一個框以overflow:hidden作為其父元素，則其中的任何position:sticky元素都不會滾動，因為它們的偏移量是根據隱藏框計算的。
• 相反，在祖先框上設置overflow:scroll將允許其position:sticky後代在該框內滾動。

範例

考慮以下範例:

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

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

在這個例子中，由於overflow:scroll，.wrapper div 是一個滾動框。因此，黏性 div 將在包裝器內滾動。

以上是CSS 定位中的滾動框由什麼決定？的詳細內容。更多資訊請關注PHP中文網其他相關文章！