Ungkapkan urutan tumpukan lengkap setiap elemen.
Ungkapkan urutan tumpukan lengkap setiap elemen.
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.
Instal DevSuite Pro secara gratis dan buka 39+ alat pengembang untuk browser Anda.
