diagnostic · one of 29free, 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 itPress ⌘+K on any tab and type z-index.Ctrl+Kon Windows and Linux
TWO BUILDS9 browsers
Chromelisting in reviewFirefoxlisting in reviewBravelisting in reviewOperalisting in reviewEdgelisting in review4 moreChromium browsers: Arc, Vivaldi, Chromium, Opera GXthe Chrome buildin 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.
TWO BUILDS9 browsers
Chromelisting in reviewFirefoxlisting in reviewBravelisting in reviewOperalisting in reviewEdgelisting in review4 moreChromium browsers: Arc, Vivaldi, Chromium, Opera GXthe Chrome build63 of these · no host permissions · three free audits