positioning
z-index
Sets the stack order of positioned elements along the z-axis. Higher values are drawn in front of lower ones within the same stacking context.
z-index: auto | <integer>Common values
| Value | Effect |
|---|---|
| auto | Uses parent stacking order; no new context |
| 0 | Creates a stacking context at the baseline layer |
| 10 | Common value for dropdowns and popovers |
| 9999 | Convention for always-on-top overlays |
| -1 | Sends element behind normal siblings |
Examples
.modal { position: fixed; z-index: 1000; }Modal renders above the page content
.dropdown { position: absolute; z-index: 20; }Popover appears above nearby elements
.backdrop { position: fixed; z-index: -1; }Decorative background sits behind content
Gotcha
z-index only applies to positioned elements (position not static) or flex/grid items; a new stacking context traps children inside it.
Related properties
position
Controls how an element is positioned in the document and whether it participates in normal flow. Non-static values enable top/right/bottom/left offsets and create a positioning context.
opacity
Sets the transparency of an entire element, including its background, borders, and children. Values range from 0 (fully transparent) to 1 (fully opaque).
transform
Applies 2D or 3D transformations like translate, rotate, scale, and skew to an element. Transforms are GPU-accelerated and do not affect surrounding layout.