Z-index & Stacking
Control which overlapping element appears on top.
Syntax
position: absolute; z-index: 10;When positioned elements overlap, z-index decides their stacking order. A higher value sits on top of a lower one.
The z-index property only works on elements whose position is not static.
Example
Loading editor…
Press Run to see the result.
When to use it
- A developer sets z-index: 1000 on a modal overlay so it always appears above all other page content regardless of DOM order.
- A designer gives a dropdown menu z-index: 200 to ensure it overlaps sibling card elements without rearranging the HTML.
- A developer debugs overlapping tooltips by setting explicit z-index values and creating a documented stacking layer system.
More examples
Modal above all other content
Sets the overlay at z-index 1000 and the dialog box at 1001 so the box always appears above its own overlay.
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.5);
z-index: 1000;
}
.modal-box {
position: fixed;
z-index: 1001;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
padding: 32px;
}Dropdown above sibling cards
Gives the dropdown a higher z-index than sibling cards so it overlaps them without touching the DOM order.
.dropdown {
position: absolute;
z-index: 200;
background: #fff;
border: 1px solid #ddd;
box-shadow: 0 4px 12px rgba(0,0,0,0.12);
min-width: 180px;
}
.card {
position: relative;
z-index: 1;
}Stacking context with layers
Documents the entire z-index scale as CSS custom properties so all UI layers have explicit, consistent stacking values.
:root {
--z-base: 1;
--z-dropdown: 100;
--z-sticky: 200;
--z-modal: 1000;
--z-toast: 1100;
}
.toast { z-index: var(--z-toast); position: fixed; }
Discussion