2026-10-17 · 6 min read · Rahul Chitturi
- css
- overflow
- layout
position: sticky keeps an element inside the nearest scrollport. overflow: hidden, auto, and scroll on an ancestor create a scrollport, so the sticky element sticks to that ancestor. A card that only needed to clip a shadow then becomes the thing the header sticks to, and the header appears never to stick to the page.
overflow: clip clips the same kind of paint and does not create a scrollport. Sticky positioning looks through a clip ancestor to the next real scrollport. The trade is that the clipped element cannot be scrolled, in script or by the reader.
Read the computed axis, not the shorthand you remember
overflow is a shorthand for overflow-x and overflow-y. overflow: clip sets both axes to clip. A split pair is rewritten by the computed-value rules, so overflow-x: clip with overflow-y: visible may not compute to the two keywords you typed. Inspect both computed values on the ancestor that wraps the sticky element.
overflow-clip-margin grows the clip edge. It does not turn clip into a scrollport. If you need a scrollbar, use auto or scroll. If you need clipping and a page-level sticky header, use clip on the card and leave the scrolling to the document.
- Find the nearest ancestor whose computed overflow is not visible.
- See whether that value is hidden, auto, scroll, or clip.
- Confirm the sticky element is a descendant of that ancestor.
- Check transform and filter if overflow is already visible.
Keep a second cause on the list
A transform other than none, a filter, or a will-change that creates a containing block can also change where a sticky element sticks. If every ancestor computes to overflow: visible and the header still sticks to a card, look at those properties before you add another overflow declaration.
The CSS formatter only changes whitespace and strips comments. A comment that says why the card uses clip will disappear if you minify. Keep that reason in the stylesheet as a declaration you can see, or in the ticket. Use the regex tester to find overflow declarations in a minified sheet, and diff the hidden version against the clip version.