When z-index 'Doesn't Work'
Sometimes you set z-index: 9999 and the element STILL hides behind another. The cause is almost always a stacking context. Learn what they are and how to spot the trap.
Step 1 of 3
z-index is scoped, not global
Most beginners assume z-index is one giant ranking across the whole page. It is not. The browser groups elements into stacking contexts, and z-index only fights for position inside its own context.
A stacking context is created automatically by certain CSS properties. The most common ones:
position: relative/absolute/fixed/stickycombined with anyz-indexvalue (even0).opacityless than 1.transform,filter,perspectivewith non-default values.will-changeon certain properties.
Once an ancestor creates a stacking context, all of its descendants are trapped inside. A child with z-index: 9999 still cannot escape its parent's stacking context.
Think of it this way: Think of a school sports day. Students compete for ranking within their year group — Year 7's first place does not outrank Year 12's second place. Stacking contexts are year groups for z-index.
Learn more on MDN