What is a stacking context and how does z-index actually work?
Learn what a CSS stacking context is, why z-index only orders elements within one, and why z-index 9999 can still fail — with clear examples and fixes.
Expected Interview Answer
A stacking context is a self-contained three-dimensional layer of the page in which child elements are stacked; z-index only orders elements within the same stacking context, never across different ones.
z-index controls the paint order of positioned elements along the z-axis, but its numbers are only compared among siblings that share the same stacking context. Certain properties create a new stacking context — a positioned element with a z-index other than auto, opacity below 1, transform, filter, will-change, and others. Once an element establishes a context, all its descendants are trapped inside it, so a child's huge z-index can never break out above an element in a sibling context, even with z-index: 9999.
- Explains why a high z-index sometimes has no effect
- Predictable layering by understanding context boundaries
- Prevents z-index 'wars' of ever-increasing numbers
- Helps debug overlays, modals, and dropdowns
- Clarifies how opacity and transform affect stacking
AI Mentor Explanation
A stacking context is like a single match happening inside its own stadium. Player numbers (z-index) decide who stands in front within that stadium, but a number 99 jersey in one stadium can never stand ahead of a number 2 in a different stadium — they're separate grounds. z-index only ranks players sharing the same field; the stadium boundary is absolute no matter how large the jersey number.
Step-by-Step Explanation
Step 1
Understand the z-axis
z-index orders positioned elements toward or away from the viewer, controlling which paints on top.
Step 2
Know what creates a context
Root html, a positioned element with numeric z-index, opacity < 1, transform, filter, will-change, and isolation: isolate all form new stacking contexts.
Step 3
Compare only within a context
z-index values are only ranked against siblings in the same stacking context, not globally.
Step 4
Recognise trapped descendants
A child inside a low-ordered context can never rise above an element in a higher sibling context, whatever its z-index.
Step 5
Debug by finding the context
When a high z-index fails, walk up the ancestors to find which one created a limiting stacking context.
What Interviewer Expects
- Clear definition of a stacking context as an isolated layer
- Understanding z-index only compares within one context
- Naming properties that create a new context (opacity, transform, z-index)
- Explaining why z-index: 9999 can still fail
- A debugging strategy for layering issues
Common Mistakes
- Thinking z-index is compared globally across the whole page
- Assuming a bigger z-index always wins regardless of ancestors
- Not realising opacity or transform silently creates a context
- Escalating z-index numbers instead of finding the real context
- Believing z-index works on non-positioned static elements
Best Answer (HR Friendly)
“A stacking context is a self-contained layer of the page, and z-index only decides the order of items inside that same layer. That's why a very high z-index sometimes does nothing — the element is trapped inside a layer that itself sits below another one.”
Code Example
/* .parent creates a stacking context because opacity < 1 */
.parent {
position: relative;
opacity: 0.99;
z-index: 1;
}
/* Even 9999 can't escape .parent's context */
.child {
position: absolute;
z-index: 9999;
}
/* Sits above .child because .sibling's context outranks .parent's */
.sibling {
position: relative;
z-index: 2;
}Follow-up Questions
- Which CSS properties create a new stacking context besides z-index?
- Why might opacity: 0.99 change how your layers stack?
- How does isolation: isolate help control stacking?
- Why does z-index have no effect on a position: static element?
- How would you debug a modal appearing behind the page content?
MCQ Practice
1. z-index values are compared between elements that share what?
z-index only orders elements within the same stacking context; values are not compared across different contexts.
2. Which of these creates a new stacking context?
An opacity value below 1 establishes a new stacking context, trapping its descendants' z-index within it.
3. Why might z-index: 9999 fail to bring an element to the front?
If an ancestor establishes a stacking context that ranks below a sibling context, no descendant z-index can escape it.
Flash Cards
What is a stacking context? — A self-contained z-axis layer; descendants stack within it and cannot escape above sibling contexts.
What does z-index actually order? — The paint order of positioned elements — but only among siblings in the same stacking context.
Name three things that create a context. — A positioned element with numeric z-index, opacity < 1, and transform (also filter, will-change, isolation).
Why can z-index: 9999 fail? — The element is trapped in an ancestor's stacking context that itself sits below another context.
Does z-index work on static elements? — No — the element must be positioned (relative, absolute, fixed, sticky) or a flex/grid item.
Continue Learning
Related Interview Questions
What is the difference between position relative, absolute, fixed, and sticky in CSS?
medium
How Do z-index and Stacking Contexts Work?
hard
What is the CSS box model and how do content, padding, border, and margin interact?
easy
What is the difference between Flexbox and CSS Grid, and when should you use each?
medium