Z-Index Mastery

Key insights

• z-index needs position. Setting z-index: 9999 on a position: static element does nothing — give it position: relative (or absolute/fixed/sticky) and the layering finally works.
• Every stacking context is its own universe. A child at z-index: 9999 can never climb above its parent's siblings — if the parent sits below, the child sits below too, no matter how huge the number.
• A z-index arms race (9999, then 99999) is a symptom, not a fix — the real culprit is almost always an unexpected stacking context somewhere up the tree.
• isolation: isolate spins up a fresh stacking context in one line, so a component's internal layers stop leaking out and z-fighting with the rest of the page.
• Stop guessing at the order — Chrome DevTools' Layers panel renders the page in 3D so you can see which element actually sits on top.

Do / Don't

• Do: Give an element position: relative before expecting z-index to do anything.
• Do: Reach for isolation: isolate to contain a component's stacking in one clean line.
• Do: Open DevTools' Layers panel to inspect the real 3D stack instead of trial-and-error.
• Don't: Escalate to z-index: 9999 to force a child above another branch — it can't beat what its parent already lost to.
• Don't: Assume a bigger z-index always wins; it only ranks siblings inside the same stacking context.