เผยลำดับการซ้อนทั้งหมดของทุกองค์ประกอบ
แสดงลำดับการซ้อนทับทั้งหมด
ทุก 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 บนหน้า, sorted from highest (top) to lowest (bottom). แต่ละ entry shows the z-index value, the CSS selector or class name, and the position property. Click ใดก็ได้ entry to highlight the corresponding element บนหน้า.
Identifies ทุก stacking context boundary บนหน้า 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 ใดก็ได้ layer in the panel to highlight and scroll to the corresponding element บนหน้า. Or click ใดก็ได้ highlighted element บนหน้า to locate it in the layer map panel. Navigate the stacking order in whichever direction is natural.
แต่ละ 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 ใดก็ได้ 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 บนหน้า เพื่อตรวจสอบ 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.
เปิด DevSuite Pro dock ลอย and click the Z-Index Inspector icon. The tool scans หน้า and identifies ทุก element with a z-index value and ทุก stacking context boundary.
Elements with z-index values get colored overlays โดยตรง บนหน้า, with labels showing their z-index numbers. Higher values appear with warmer colors, lower values with cooler colors.
Open the side panel เพื่อดู all z-index layers sorted from highest to lowest. แต่ละ entry shows the value, selector, and position property. Click ใดก็ได้ entry to highlight the element บนหน้า.
The panel's "Stacking Contexts" section lists ทุก element that creates a new stacking context and the CSS property responsible. This is usually the key to understanding z-index issues.
คลิกองค์ประกอบใดก็ได้ เพื่อดู 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.
ติดตั้ง DevSuite Pro ฟรีและปลดล็อกเครื่องมือสำหรับนักพัฒนามากกว่า 39 รายการสำหรับเบราว์เซอร์ของคุณ
