Z-Index Property
Last updated: 2026-09-13
z-index Z-Index Property
The z-index property controls the stacking order of positioned elements along the z-axis, perpendicular to the screen; elements with a higher value are rendered above those with lower values. It is typically used with position for layered UI such as modals, dropdowns, and overlays.
| Category | |
|---|---|
| Initial Value | auto |
| Inherited | No |
| Applies To | positioned |
| Animation Type | integer |
| CSS Version | CSS2 |
| Status | Standard |
📝 Syntax
z-index: auto | <integer>;⚙️ Values
| Value | Type | Description |
|---|---|---|
auto | Keyword | Does not create a new stacking context. |
<integer> | Type | An integer stacking order; larger values render on top. |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| z-index | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Supported in all major browsers | |||||
Warning： z-index only affects elements with a non-static position; setting it on elements in normal flow has no effect.
Important： z-index comparisons only work within the same stacking context. Values in different stacking contexts cannot be compared directly, and a child's z-index cannot exceed its parent stacking context's boundary.
❓ FAQ
QWhat z-index value should I use?
AFor most business cases, 1 to 10 covers almost everything; larger projects use round numbers or thousands, with modals at 9999 and overlays at 1000. Avoid abusing extreme values like 999999: once several components compete by bumping z-index higher, the numbers spiral out of control and become unmaintainable. It is better to keep z-index within a small range and manage levels with variables or conventions.
QWhy isn't z-index working?
ACommon causes: first, the element has no position, since z-index only affects positioned elements and flex or grid items; second, a parent creates a stacking context, via opacity below 1, transform, filter, and so on, confining the child's z-index within it; third, the two elements are not in the same stacking context or share no common parent, so they cannot be compared. Debug these three in order.
QWhat is a stacking context?
AA stacking context is an isolated zone of stacking: z-index ordering only applies within that zone. It is created by positioned elements with a non-auto z-index, opacity below 1, transform, filter, and several other properties. A child's z-index can never escape its parent stacking context's boundary, which is exactly why a modal often fails to cover a backdrop. The fix is usually to move the overlapping element out of that context.
QDoes z-index only work on positioned elements?
ATraditionally yes, z-index applies to positioned elements, meaning relative, absolute, fixed, or sticky. In flex and grid layouts, however, items can use z-index to control visual order even without being positioned. Elements in normal flow that are not positioned cannot be reordered with z-index, so if you need to layer ordinary elements, add position:relative first, which costs nothing in layout terms and unlocks z-index.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
position Property
Learn the prerequisites for z-index to take effect.
Stacking Context
Understand the scope within which z-index works.
