Description & Usage

The z-index property specifies 3D depth layering along the Z-axis for overlapping elements.

Elements with higher z-index values cover elements with lower values. It only applies to positioned elements (position relative, absolute, fixed, sticky) or flex/grid items.

Property Specifications

Property FeatureSpecification
CategoryLayout
Initial Valueauto
InheritedNo (not inherited)
Applies ToPositioned elements and flex/grid items
Position & Z-Index Playground
20px
30px
2
Container (relative)
Box 1 (z: 1)
Target (relative)
Box 2 (z: 3)
.target-element { position: relative; top: 20px; left: 30px; z-index: 2; }

Syntax

z-index: auto | 1 | 10 | 1000;

Property Values

ValueDescription
autoStack level matches parent stacking context.
1000High stack priority, rendering above lower z-index siblings.

Code Examples

Fixed Sticky Header Layer
.site-header { position: sticky; top: 0; z-index: 100; }
Ensures sticky navigation header stays on top of page content during scroll.