Suggest an editImprove this articleRefine the answer for “What does the z-index property do?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**`z-index`** controls the stacking order of elements along the Z axis, that is, it determines which element appears on top of others when they overlap; it only works for elements that create a stacking context. **Key point:** `z-index` controls the stacking depth of elements, but its effect is limited to stacking contexts.Shown above the full answer for quick recall.Answer (EN)Image`z-index` controls **the stacking order of elements along the Z axis**, that is, it determines which element appears on top of others when they overlap. It only works for elements that **create a stacking context**: usually these are elements with a `position` other than `static` (`relative`, `absolute`, `fixed`, `sticky`), along with a number of other conditions. --- ### **How it works** - the **higher the value** of `z-index`, the **closer the element is to the user** (higher in the layers) - elements with the same `z-index` are ordered **by DOM order** - `z-index` **does not work** on elements with `position: static` --- ### **Example** ```css .box1 { position: absolute; z-index: 1; } .box2 { position: absolute; z-index: 10; } ``` `.box2` will be on top of `.box1`. --- ### **When** `z-index` **does not work** Even if you set a higher value, the element may not rise if it is: - in **a different stacking context** - has no positioning - "trapped" by a parent that has its own context (for example, `transform`, `opacity`, `filter`, `isolation`, `z-index: 0`, etc.) --- ### **Summary** `z-index` controls **the stacking depth of elements**, but its effect is limited to stacking contexts.For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.