CSSAwwwards
+ Submit tool
Built-in toolFree · No signup

CSS Z-Index Visualizer

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

1
Tooltip
1500
2
Modal dialog
1001
3
Modal overlay
1000
4
Dropdown menu
200
5
Sticky header
100
6
Base content
1

Paint order (low → high)

1100200100010011500
CSS Output
.tooltip {  position: relative;  z-index: 1500;} .modal-dialog {  position: relative;  z-index: 1001;} .modal-overlay {  position: relative;  z-index: 1000;} .dropdown-menu {  position: relative;  z-index: 200;} .sticky-header {  position: relative;  z-index: 100;} .base-content {  position: relative;  z-index: 1;}

How to use

01

Add your elements

Click 'Add element' and enter a name and z-index value for each layer in your stacking context.

02

Read the diagram

Elements are sorted by z-index — higher values appear visually on top in both the stack diagram and the flat list.

03

Spot conflicts

Elements with the same z-index are highlighted — their paint order depends on DOM order, which can cause unexpected results.

04

Copy CSS

Copy a complete CSS snippet with position: relative and z-index declarations for all your named elements.

More CSS utility tools

From our directory of 30+ CSS tools.

Browse all →

Know a great CSS tool?

Submit it to the directory and help developers discover it.

Submit a tool →