Can overflow: hidden break position: sticky? Why?

Q: Can overflow: hidden break position: sticky? Why?

Yes, `overflow: hidden` can break `position: sticky`. This happens because a sticky element only sticks within the boundaries of its nearest scrollable ancestor. When an ancestor has `overflow: hidden`, it creates a new clipping and scrolling context that confines the sticky element’s behavior to that container. `overflow: hidden` establishes a new containing block for sticky elements, so the element can only stick **within that box’s visible area**. Once the sticky element reaches the boundary of the ancestor with `overflow: hidden`, it gets **clipped** and stops being sticky. This behavior ensures that sticky elements don’t overlap or escape their scrollable container. To preserve sticky behavior, the parent element should have `overflow: visible` (or no overflow property set). .container { height: 200px; overflow: hidden; /* Breaks sticky */ border: 2px solid black; } .inner { height: 400px; background: linear-gradient(white, lightblue); } .sticky { position: sticky; top: 0; background: coral; padding: 10px; } Sticky won't work here because overflow is hidden. Scroll this container—notice the sticky element doesn’t stay fixed.

Difficulty: 5/10

position: sticky, overflow handling, layout containment

How overflow: hidden affects sticky positioning

Yes, overflow: hidden can break position: sticky. This happens because a sticky element only sticks within the boundaries of its nearest scrollable ancestor. When an ancestor has overflow: hidden, it creates a new clipping and scrolling context that confines the sticky element’s behavior to that container.

Why It Happens

1
overflow: hidden establishes a new containing block for sticky elements, so the element can only stick within that box’s visible area.
2
Once the sticky element reaches the boundary of the ancestor with overflow: hidden, it gets clipped and stops being sticky.
3
This behavior ensures that sticky elements don’t overlap or escape their scrollable container.
4

Example: Overflow hidden breaking sticky

Scenario Questions

0-2 years experience

2-5 years experience

1We noticed that a sticky navigation bar stopped working after we added overflow: hidden to a wrapper div to hide scrollbars. Walk me through how you would diagnose and resolve the issue.

Follow-up Questions