Add elements with names and z-index values to see them rendered as a visual stacking diagram. Elements are sorted by z-index and displayed as layers so you can immediately understand the paint order and why one element sits above another.
Layers (6)
Edit names and z-index values below. The diagram updates live.
Stacking diagram — top = highest z-index
Paint order (low → high)
Click 'Add element' and enter a name and z-index value for each layer in your stacking context.
Elements are sorted by z-index — higher values appear visually on top in both the stack diagram and the flat list.
Elements with the same z-index are highlighted — their paint order depends on DOM order, which can cause unexpected results.
Copy a complete CSS snippet with position: relative and z-index declarations for all your named elements.
