Detailed explanation
The CSS z-index property controls an element’s stacking level along the imaginary z-axis, which determines what appears in front when elements overlap. It accepts auto or an integer, including negative values. Higher values generally appear above lower values, but only when compared within the same stacking context. One important correction to the usual definition: z-index applies to positioned elements and also to flex and grid items even when their position is static. It does not control layout or prevent overlap.
A stacking context is a self-contained group whose contents are painted together as one unit in its parent stacking context. The root element creates the initial context. Common triggers include relative or absolute positioning with a non-auto z-index, fixed or sticky positioning, opacity below 1, a non-none transform, and isolation: isolate. Flex and grid items with a non-auto z-index also create contexts. In contrast, position: relative with z-index: auto does not create one by itself. These rules explain why changing an apparently unrelated property can affect overlapping content.
Inside a context, painting follows defined stages rather than simply sorting every descendant by z-index. Simplified, the context’s background and border are painted first, followed by negative stacking levels, normal-flow content, positioned elements at the auto or zero level, and positive stacking levels. At equivalent stacking levels, tree order generally breaks ties, though flex and grid layouts use order-modified document order. A child’s z-index affects its placement inside its own context; it cannot override the placement of an ancestor context.
For example, suppose a positioned sidebar has z-index: 1 and contains a modal with position: fixed and z-index: 1000. If a sibling header establishes a context at z-index: 2, the modal remains below that header wherever they overlap. Increasing the modal’s value cannot solve this. Inspect the ancestor chain, remove an unnecessary context, raise the appropriate ancestor, or move the modal outside that ancestor. Interviewers look for this contextual reasoning, not just the phrase ‘higher numbers appear on top.’
Key points to remember
- z-index accepts auto and positive, zero, or negative integers.
- It applies to positioned elements and to flex or grid items, including static items.
- Stacking contexts can be created by positioning rules, opacity, transforms, and isolation.
- Each stacking context is treated as one unit within its parent context.
- A descendant’s large z-index cannot overcome its ancestor context’s lower stacking level.
Common mistakes candidates make
- Claiming that z-index never works on static elements, ignoring flex and grid items.
- Increasing z-index repeatedly without checking ancestor stacking contexts.
- Assuming every positioned element creates a stacking context, including relative positioning with z-index: auto.
Likely follow-up questions
What is the difference between z-index: auto and z-index: 0?
For a relatively or absolutely positioned element, auto does not establish a stacking context, whereas 0 does. Fixed and sticky elements establish contexts even with auto, so the distinction depends on the element’s other properties.
How would you debug a modal appearing behind another element?
Inspect both elements and their ancestors for stacking-context triggers such as transform, opacity, and positioned non-auto z-index. Compare the contexts at their shared ancestor, then adjust the relevant context or render the modal outside the limiting ancestor.
Can a very high z-index appear above a modal dialog in the top layer?
Ordinary document stacking contexts cannot appear above an element placed in the browser’s top layer merely by increasing z-index. A dialog opened with showModal() enters that layer, unlike a dialog opened with show().
Interview tip: Define z-index, explain the stacking-context boundary, and demonstrate it with a child modal trapped beneath a sibling header.