Z-Index Inspector reveals the complete stacking order of every element on a webpage. Every element with a z-index value is highlighted and labeled directly on the page, and a sorted layer map panel shows all z-index layers from bottom to top. Identifies stacking contexts created by position, transform, opacity, and other CSS properties — finally making z-index debugging visual and intuitive.
Z-index bugs are some of the most frustrating issues in CSS. A modal that should appear above everything is hidden behind a sidebar. A dropdown menu disappears behind the next section. A tooltip is invisible because a parent element creates an unexpected stacking context. The root cause is almost always a misunderstanding of how stacking contexts work — and browser DevTools give you almost no help visualizing them. Z-Index Inspector makes the invisible visible. Every element with an explicit z-index gets a colored overlay and a label showing its value. A sorted layer map panel lists all z-index values from bottom (lowest) to top (highest), showing which CSS class or element each value belongs to. Most importantly, the tool identifies stacking context boundaries — elements that create new stacking contexts via position + z-index, transform, opacity < 1, filter, will-change, or isolation. Understanding which ancestor creates the stacking context is usually the key to fixing z-index bugs.
Every element with a z-index value gets a semi-transparent colored overlay and a label badge showing its z-index number. Higher z-index values get warmer colors (reds), lower values get cooler colors (blues). The visual layering makes the stacking order immediately intuitive.
A side panel lists all z-index values found on the page, sorted from highest (top) to lowest (bottom). Each entry shows the z-index value, the CSS selector or class name, and the position property. Click any entry to highlight the corresponding element on the page.
Identifies every stacking context boundary on the page and the CSS property that creates it — position: relative/absolute with z-index, transform, opacity < 1, filter, will-change, isolation: isolate, or contain: layout. These are listed separately so you can trace why a z-index value isn't behaving as expected.
Click any layer in the panel to highlight and scroll to the corresponding element on the page. Or click any highlighted element on the page to locate it in the layer map panel. Navigate the stacking order in whichever direction is natural.
Each layer entry shows the element's CSS position value (static, relative, absolute, fixed, sticky) since z-index only applies to positioned elements. Spot cases where z-index is set but position is static — a common bug where z-index has no effect.
For any selected element, see the complete chain of ancestor stacking contexts up to the root. Understand exactly which ancestor's stacking context is limiting the element's z-index scope — the key insight for most z-index debugging.
A modal with z-index: 9999 is hidden behind a sidebar with z-index: 10. How? Z-Index Inspector shows that the modal's parent has position: relative and creates a stacking context with z-index: 1, while the sidebar's parent has z-index: 2. The modal can never escape its parent's context.
A dropdown menu disappears behind the next section when it opens. The inspector reveals that the menu's container has overflow: hidden (which also creates a stacking context) or that the next section has a higher z-index. Visual layer highlighting makes the overlap obvious.
Over time, z-index values accumulate: 10, 100, 999, 9999, 99999. The layer map shows all values sorted, making it easy to identify the actual range needed and simplify to a clean scale (1, 2, 3, 10, 100).
Chat widgets, cookie banners, and analytics overlays inject elements with high z-index values. Z-Index Inspector shows exactly what values they use, helping you set your own z-index values appropriately to avoid conflicts.
Review all stacking contexts on the page to check for unnecessary ones. Transforms, filters, and opacity applied for visual effects may inadvertently create stacking contexts that cause z-index issues elsewhere. The context list makes them all visible.
Open the DevSuite Pro floating dock and click the Z-Index Inspector icon. The tool scans the page and identifies every element with a z-index value and every stacking context boundary.
Elements with z-index values get colored overlays directly on the page, with labels showing their z-index numbers. Higher values appear with warmer colors, lower values with cooler colors.
Open the side panel to see all z-index layers sorted from highest to lowest. Each entry shows the value, selector, and position property. Click any entry to highlight the element on the page.
The panel's "Stacking Contexts" section lists every element that creates a new stacking context and the CSS property responsible. This is usually the key to understanding z-index issues.
Click any element to see its ancestor stacking context chain — which parent contexts affect its rendering order. Follow the chain upward to find the context boundary that's causing the stacking issue.
Install DevSuite Pro for free and unlock 64+ developer tools for your browser.
