溢出如何影响 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中文网其他相关文章！