What Determines a Scrolling Box in CSS?

What Defines Scrolling Boxes in CSS?

In CSS, the term "scrolling box" holds significance in the context of sticky positioning. According to the Positioned Layout Module Level 3 draft, a sticky box's offset is calculated relative to the nearest ancestor with a scrolling box.

Identifying scrolling boxes can be crucial for controlling sticky positioning. As noted in the draft, the current definitions and usage of related terms like "flow root" are not entirely optimal.

Determining Scroll Box Status

To understand the behavior of scrolling boxes, let's consider the role of the overflow property. A scrolling box is typically one where overflow is set to a non-visible value. This means that the content of the box can potentially extend beyond its boundaries, making it scrollable.

As an example, let's consider the following code:

.wrapper {
  height: 200vh;
  border: 2px solid;
}

.wrapper > div {
  position: sticky;
  top: 0;
  height: 20px;
  background: red;
}

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

In this scenario, the parent .wrapper is taller than the viewport, causing a vertical scrollbar to appear. As a result, the child div with position: sticky will become sticky within the viewable area of .wrapper when scrolled. This demonstrates the effect of scrolling boxes on sticky positioning.

To summarize, a scrolling box in CSS is typically defined as a box with overflow set to a value that enables scrolling. Understanding this concept is essential for manipulating and controlling the behavior of sticky elements in your designs.

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