diagnostic · one of 36 free, no counter
Z-index
Why is my modal behind the header?
A z-index of 9999 loses to a z-index of 1 whenever the two are in different stacking contexts, and nothing in the browser tells you a context exists. This maps them: which elements create one, what is inside each, and where the element you care about actually sits.
Reach it Press ⌘ + K on any tab and type z-index. Ctrl + K on Windows and Linux
in the panel · free, no counter
What this actually is
every stacking context and the property that created itWhenever something is behind something it should be in front of and the z-index looks right. The answer is almost always an ancestor rather than the element itself, which is exactly what a tree shows and a single-element inspector does not.
What creates a stacking context
the six the panel flags most- position + z-index
- relative, absolute or fixed with any z value other than auto
- transform
- any value other than none - the usual cause of a sticky header breaking
- filter, backdrop-filter
- including a filter used only for a hover state
- isolation: isolate
- deliberate, and the cleanest fix when you need one
- will-change
- on transform, opacity or filter
- opacity < 1
- a fade animation creates and destroys a context as it runs
Asked about this diagnostic
5 of themDoes it change the page?
No. It reads computed styles and draws an overlay. Nothing is written to the document, and the overlay disappears with the panel.
Why does my z-index of 9999 still lose?
Because it is competing inside a parent context, not against the element you think. The ladder shows the parent that boxed it in, which is usually a transform or a filter several levels up.
What counts as a trap?
A context whose children can never paint above its siblings, whatever z they declare. Those rows are marked so you fix the parent rather than raising the child again.
Does it work inside iframes?
Same-origin iframes are walked as part of the page. Cross-origin frames are listed but not entered - the browser does not allow it, and the Iframes diagnostic covers what is visible from outside.
Is it free?
Yes, with no counter. Every diagnostic that reads the document in front of you is free; Pro is for exports, reports and the readings that cost a server request.
how to use z-index
- Open Z-index on the page where something sits behind something else.
- Read which elements create a stacking context, and what is inside each one.
- Find your element in that tree. The answer is almost always an ancestor, not the element itself.
-
A
z-indexof 9999 loses to a 1 in a different context, so fix the ancestor.
written about at length
70 of these · no host permissions · three free audits