What is z-index and how does the stacking context work in CSS?
Asked on Sep 02, 2025
Answer
Z-index is a CSS property that controls the vertical stacking order of elements that overlap. The stacking context determines how elements are layered on top of one another.
Example Concept: The z-index property specifies the stack order of an element, with higher values appearing in front of lower values. A stacking context is formed by any element with a position value other than static and a z-index value other than auto. Within a stacking context, child elements are stacked according to their z-index values, but they don't affect elements outside of their context.
Additional Comment:
- Elements with a higher z-index value are displayed in front of those with lower values.
- Positioned elements (relative, absolute, fixed) can have a z-index applied.
- A new stacking context can be created by setting a z-index on a positioned element.
- Nested stacking contexts are independent of their parent contexts.
- Default stacking order without z-index is determined by the order of elements in the HTML.
Recommended Links: