Key insights
- z-index needs position. Setting
z-index: 9999on aposition: staticelement does nothing — give itposition: relative(or absolute/fixed/sticky) and the layering finally works. - Every stacking context is its own universe. A child at
z-index: 9999can 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: isolatespins 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: relativebefore expectingz-indexto do anything. - Do: Reach for
isolation: isolateto 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: 9999to 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.
