What Determines a Scrolling Box in CSS Positioning?

Understanding Scrolling Boxes in CSS Positioning

The concept of "scrolling boxes" emerged in the CSS Positioned Layout Module Level 3 (Working draft), specifically in the context of sticky positioning. The definition states that a stickily positioned box's offset is calculated relative to the nearest ancestor with a scrolling box or the viewport if no such ancestor exists.

Defining Scrolling Boxes

Despite the term's usage in the draft, it lacks a precise definition elsewhere in CSS. However, based on the available information, a scrolling box is understood to be:

• A box with a value for the "overflow" property set to a value other than "visible" (the default).

This understanding aligns with examples where overflow issues can affect the behavior of sticky elements.

Identifying Scrolling Boxes

In practice, switching on or off whether a box is a scrolling box can be achieved by modifying the "overflow" property. For example:

• If a box has overflow:hidden as its parent, any position:sticky elements within it will not scroll, as their offset is calculated based on the hidden box.
• Conversely, setting overflow:scroll on an ancestor box will allow its position:sticky descendants to scroll within that box.

Example

Consider the following example:

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

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

In this example, the .wrapper div is a scrolling box due to overflow:scroll. Therefore, the sticky div will scroll within the wrapper.

The above is the detailed content of What Determines a Scrolling Box in CSS Positioning?. For more information, please follow other related articles on the PHP Chinese website!