Z-Index Stacking Context Visualizer

Paste HTML/CSS and render a 3D side-view of all stacking contexts — see why elements overlap incorrectly.

Elements (one per line: name, position, z-index, parent)

3D side view (height = stack order, not z-index value)

Computed paint order (back to front)

Tip: An element with position: static (or no positioning) ignores z-index entirely and paints in document order within its stacking context. A child can never visually escape its parent's stacking context — that's why a dropdown with z-index: 9999 can still render behind a sibling, if that sibling's ancestor created a higher stacking context first.