How does overflow interact with position: sticky or position: fixed?

Overflow behavior with sticky and fixed positioning

The overflow property can significantly affect how elements with position: sticky or position: fixed behave. Overflow creates containing and clipping contexts that can limit the visibility or positioning of these elements.

Key Interactions

A position: sticky element only sticks within the nearest scrollable ancestor — that is, the nearest ancestor with overflow set to auto, scroll, or hidden (not visible).
If the sticky element’s ancestor has overflow: hidden or overflow: clip, the sticky element will be clipped or stop sticking once it reaches the ancestor’s boundary.
position: fixed elements are not affected by overflow in ancestors because they are positioned relative to the viewport (unless inside a transformed element).
However, when overflow creates a new stacking or clipping context, fixed elements may appear clipped if their containing block has overflow set to hidden or clip.

Example: Sticky element inside an overflow container

Question Loading...

Transformation and Transition

Frameworks

Everything else

How does overflow interact with position: sticky or position: fixed?

Overflow behavior with sticky and fixed positioning

Key Interactions

A position: sticky element only sticks within the nearest scrollable ancestor — that is, the nearest ancestor with overflow set to auto, scroll, or hidden (not visible).
If the sticky element’s ancestor has overflow: hidden or overflow: clip, the sticky element will be clipped or stop sticking once it reaches the ancestor’s boundary.
position: fixed elements are not affected by overflow in ancestors because they are positioned relative to the viewport (unless inside a transformed element).
However, when overflow creates a new stacking or clipping context, fixed elements may appear clipped if their containing block has overflow set to hidden or clip.

Example: Sticky element inside an overflow container