The
sticky
utility positions an element as `relative` until it crosses a specified threshold (e.g., `top-0`), then it's treated as `fixed`. However, it only "sticks" within the boundaries of its direct parent container.
The `sticky` element below is inside a parent container (`div class="parent-short"`) that has a fixed height (`h-64`). The sticky element will stick to the top of *this parent* as you scroll *within this parent* (if it had `overflow-auto` and internal scroll). However, once the entire short parent scrolls out of the main viewport, the sticky element will disappear with it. It won't stick to the viewport top beyond its parent's boundary.
Content within the short parent. Scroll the main page. This yellow bar will stick near the top of this gray box. But when this gray box scrolls off screen, the yellow bar goes with it.
End of short parent's content.
When the gray "parent-short" box scrolls out of view, the yellow sticky item also disappears. It does not remain stuck to the top of the browser viewport.
Here, the `sticky` element is within a parent container that is either very tall itself, or is followed by enough content in the document flow, allowing the sticky behavior relative to the viewport to be observed for a longer period as the page scrolls.
Start of content in the taller parent section.
Tall scrollable content area within the parent's scope.
More content here to ensure the parent is "tall enough" for the sticky effect to be visible while scrolling the main page.
End of taller parent's content.
As you scroll the main page, the teal sticky item will stick near the top of the browser viewport for as long as its gray "parent-tall" container is visible and being scrolled through.
Extra page content to enable scrolling further down.