CSS Stacking Contexts: The Z-Axis Explained
A CSS stacking context is like a self-contained group of layers. Elements inside only compete for z-index with siblings in that same group. They're created by properties like position with z-index, opacity, or transform.
Why it exists
Stacking contexts provide a predictable system for rendering overlapping elements on a page. Without this system, layering would depend solely on document order, making it impossible to reliably build complex UIs like modals, dropdowns, or tooltips that must appear on top of other content.
The mental model
Imagine a set of transparent sheets, each with drawings on it. A stacking context is like taking a few of those sheets, grouping them together, and treating that group as a single, indivisible sheet. You can reorder the sheets within the group using z-index, but the entire group moves as one unit when you stack it with other sheets or groups.
How it works
A new stacking context is formed when an element has certain CSS properties. The most common triggers are setting position to relative or absolute with a z-index other than auto, setting position to fixed or sticky, or applying properties like opacity (with a value less than 1), transform, or filter. Once a stacking context is formed, all its descendant elements are stacked relative to each other. The entire element that created the context, along with all its children, is then treated as a single atomic unit within its parent's stacking context.
When to use it
You don't “use” a stacking context directly; you create one by using properties that trigger it. This is essential for building any UI with overlapping elements, such as dropdown menus, tooltips, and modals. Understanding this concept is key to debugging why an element isn't appearing on top of another as expected.
When not to use it
Be cautious of creating stacking contexts unintentionally. For example, applying opacity: 0.999 or transform: translateZ(0) to fix a minor rendering bug can create a new stacking context. This can unexpectedly trap child elements, breaking z-index behavior elsewhere and causing the common “my z-index isn’t working” bug.
One canonical example
Consider a page with a header (z-index: 10) and a main content area. Inside the main content, you have a card with position: relative and z-index: 1. This card creates a new stacking context. Inside that card, you place a tooltip with position: absolute and z-index: 9999. Despite its huge z-index, the tooltip will never appear above the header, because it is trapped inside the card's stacking context, and the entire card is stacked below the header.
Interview question
Why might an element with z-index: 9999 still appear behind another element with z-index: 10?
- a.The z-index property is only effective when the position property is set to static.
- b.The z-index value of 9999 is too high and is treated as auto, which defaults to a lower stacking order.
- c.The element with z-index: 10 has a transform property applied, which always elevates its stacking order.
- d.The element with z-index: 9999 is a descendant of an element that established a new stacking context, which itself is stacked below the z-index: 10 element.Correct
Why? this is the answer
A new stacking context traps its descendants, meaning they can only stack relative to each other within that context. If the element creating this context is itself stacked below another element (like the z-index: 10 element), its children, regardless of their high z-index, cannot escape to appear above it. Option C is incorrect because while transform creates a stacking context, it doesn't automatically elevate its stacking order above all others; its position is still relative to its parent's context.
Just read this? Test yourself on what you have been reading.
Read the original → developer.mozilla.org
- #css
- #layout
- #z-index
- #design systems
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on css — each one lists the topics its interview covers.
See open roles