z-index Not Working? Stacking Contexts Explained

You set z-index: 9999 and the dropdown still hides behind a card. This isn't a bug — it's stacking contexts, CSS's least-taught rule.

The rule

z-index only competes within the same stacking context. If parent A creates a context at z-index 1, EVERYTHING inside it — even z-index 9999 — sits below parent B at z-index 2. Like apartment floors: flat 999 on floor 1 is still below flat 1 on floor 2.

What creates a stacking context (the sneaky part)

• position + z-index (the known one)
• transform, filter, backdrop-filter — ANY value
• opacity less than 1
• will-change, isolation: isolate, fixed/sticky position

That innocent transform: translateY(-2px) hover-lift on a card? It just created a context and trapped every child's z-index inside.

Debugging method

1. In DevTools, walk UP from the hidden element checking computed styles for the creators above
2. Fix by raising the z-index of the context-creating ancestor, not the child
3. Or restructure: portals/append-to-body exist precisely for modals and tooltips

Full positioning lesson: Position.