How Does Overflow Affect Sticky Positioning in CSS Positioned Layout Module Level 3?

Scrolling Boxes in CSS Positioned Layout Module Level 3

The CSS Positioned Layout Module Level 3 defines sticky positioning, which is similar to the behavior of a relatively positioned box. However, the offset is calculated with regard to the nearest ancestor with a scrolling box, or the viewport if no ancestor has a scrolling box.

What Qualifies as a Scrolling Box?

A scrolling box is a box where the value of overflow is set to a value other than visible (the default). This is based on previous documentation where issues with sticky elements arose due to overflow.

Effect of Overflow on Sticky Positioning

If an element with overflow: hidden is an ancestor of a position: sticky element, the latter's offset will be calculated based on the ancestor box with hidden overflow. As a result, scrolling behavior will be restricted, preventing the sticky element from being visible.

Code Example

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

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

The above is the detailed content of How Does Overflow Affect Sticky Positioning in CSS Positioned Layout Module Level 3?. For more information, please follow other related articles on the PHP Chinese website!