CSS Positioning Playground
Relative parent with an absolute child in its bottom-right corner.
This parent establishes the containing block for the absolute child.
Scrollable container with a sticky header. Scroll inside the box below.
Scroll this panel and watch the yellow header stay pinned to the top of the container.
Content row 1: Sticky positioning behaves like relative positioning until the element reaches its threshold.
Content row 2: Here the threshold is top: 0, measured against the scrollable container.
Content row 3: The header will keep sticking while its parent container remains in view.
Content row 4: This makes sticky useful for section labels, table headers, and in-page navigation.
Content row 5: Keep scrolling to see the sticky behavior continue.
Content row 6: The element remains part of the normal document flow.
Content row 7: Unlike fixed positioning, it is constrained by its parent container.
Content row 8: Once the container's scroll area ends, the sticky behavior ends too.
Content row 9: A tall container gives enough room to see the effect clearly.
Content row 10: End of the demo content.