2026-10-17 · 8 min read
- css
- overflow
- layout
Sticky positioning is contained by the nearest scrollport. An ancestor with overflow: auto, scroll, or hidden is a scrollport. The sticky element sticks inside that box. Hidden is the value people set to crop a shadow or a border radius, and it quietly becomes the scrollport that traps a header.
overflow: clip crops paint too, and it does not create a scrollport. A sticky descendant looks through the clip to the next ancestor that really scrolls, usually the document. The clipped box cannot be scrolled by the reader or by setting scrollTop. Choose clip when the crop is visual. Choose hidden, auto, or scroll when the box itself must scroll.
Inspect both axes after the shorthand
The overflow shorthand sets overflow-x and overflow-y. overflow: clip means both axes clip. If you set the axes separately, the computed values can differ from the cascaded keywords. A visible axis paired with a non-visible axis is rewritten. Read the computed overflow-x and overflow-y in the browser before you decide which behavior shipped.
overflow-clip-margin expands the rectangle used for clipping. It is useful when a shadow or a focus ring was cut off. It does not create a scrollport and it does not restore scrolling. If a design needs both a scrollbar and a page-level sticky header, the scroller should be an ancestor outside the sticky element's card, not the card.
- Name the element that should scroll.
- Set clip on boxes that only need a crop.
- Set auto or scroll on the box that should scroll.
- Re-read computed overflow after any split declaration.
Check containing blocks when overflow is already visible
If every ancestor between the sticky element and the document computes to visible, and the element still sticks to an inner box, look for a transform other than none, a filter, a backdrop-filter, or a will-change value that creates a containing block. Those change sticky behavior without an overflow keyword.
contain: paint also creates a containing context that clips. A utility class can add it far from the overflow rule you are editing. Search the computed style of the card, not only the source line that says overflow.
Leave a declaration a minifier will keep
The CSS formatter strips comments when it minifies, and it does not evaluate overflow. A comment that says clip so the header can stick will vanish from the minified sheet. The declaration overflow: clip is the part that survives. Keep the reason in the change note.
Use the regex tester to find overflow declarations in a built stylesheet. A pattern with gv can list the values if you need Unicode set syntax; an ordinary pattern with g is enough for the keyword. Diff the hidden rule against the clip rule, and store the computed axes in JSON when the bug report has to travel. The passing case is a header that stays with the document while the card still crops its shadow.