Debugging Position Sticky

Designers often find postion: sticky to be very difficult to work with in modern web browsers.

There are a few developments that have occurred as browser technology has progressed, that often trips up designers.

Here are two in particular;

Stacking Order

Read up on stacking order and how it works. In general, position sticky must be relative to something, and that something is defined by stacking order context.

The upshot is that sticky may be working just fine, but that what it's positioning relative to is not what you expect.

There are a number of things that can change stacking order, but two I've encountered;

• Any positioned parent, e.g. relative, fixed, absolute, etc can re-define the stacking order.
• 3d-transforms, which are frequently used by Webflow interactions.

Overflow: hidden

Abi Rana notes in the Webflow forums that overflow: hidden on any ancestor element will also break position: sticky.

https://discourse.webflow.com/t/sticky-position-not-working-in-1440-and-1920-screen-size/285716

‍