CSS 定位中的滚动框由什么决定？

理解 CSS 定位中的滚动框

“滚动框”的概念出现在 CSS 定位布局模块第 3 级（工作草案）中，特别是在粘性定位的背景下。该定义指出，如果不存在这样的祖先，则粘性定位框的偏移量是相对于具有滚动框或视口的最近祖先计算的。

定义滚动框

尽管草案中使用了该术语，但 CSS 中其他地方却缺乏准确的定义。但是，根据现有信息，滚动框可以理解为：

• “overflow”属性值设置为“visible”（默认值）以外的值的框。

这种理解与溢出问题可能影响粘性行为的示例相一致

识别滚动框

在实践中，可以通过修改“overflow”属性来实现打开或关闭一个框是否为滚动框。例如：

• 如果一个框以overflow:hidden作为其父元素，则其中的任何position:sticky元素都不会滚动，因为它们的偏移量是根据隐藏框计算的。
• 相反，在祖先框上设置溢出：滚动将允许其位置：粘性后代在该框内滚动

示例

考虑以下示例：

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

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

在此示例中，.wrapper div 是由于溢出而出现滚动框：滚动。因此，粘性 div 将在包装器内滚动。

以上是CSS 定位中的滚动框由什么决定？的详细内容。更多信息请关注PHP中文网其他相关文章！