z-index
The z-index property sets the stacking order of a positioned element within its stacking context.
Syntax
z-index: auto | <integer>;
Examples
.header { position: sticky; top: 0; z-index: 10; }
.modal { position: fixed; inset: 0; z-index: 1000; }
Output
Keeps the header above page content and the modal above everything else.
Notes
z-index only affects positioned elements (and flex/grid items). It is scoped to the current stacking context; a high value inside a low-z parent cannot escape it. Properties like opacity below 1, transform, and filter create new stacking contexts.
Browser & runtime support
| Environment | Since version |
|---|---|
| chrome | 1.0 |
| firefox | 1.0 |
| safari | 1.0 |
| edge | 12 |