Detailed explanation
A stacking context is an independent group of elements whose painting order is resolved together. Within it, CSS determines which backgrounds, content, and positioned descendants appear above others. The entire group then participates as one unit in its parent stacking context. This matters because z-index is not a global priority: a child with z-index: 9999 cannot escape its parent’s stacking context to cover a sibling context painted above that parent. Interviewers look for this boundary-based understanding, not just a memorised list of properties.
The document root establishes the initial stacking context. An element with position: relative or absolute creates one when z-index is not auto; z-index: 0 qualifies. Elements with position: fixed or sticky create stacking contexts even when z-index is auto. Flex items and grid items also create one when their z-index is not auto, without requiring a non-static position. By contrast, position: relative alone and z-index on an ordinary, non-positioned block do not create a stacking context.
Several visual properties establish contexts independently of positioning: opacity below 1; transform, filter, backdrop-filter, or perspective other than none; and individual translate, rotate, or scale values other than none. Other triggers include isolation: isolate, mix-blend-mode other than normal, and non-none clip-path or masking effects. Layout or paint containment also creates one, including contain: layout, paint, content, or strict. Elements placed in the top layer, such as a modal dialog opened with showModal(), establish contexts too. will-change creates a context when it names a property whose non-initial value would create one, such as transform or opacity—not for every property.
In the example, opacity: 0.99 and transform: translateZ(0) each independently trigger a stacking context; together they still create just one context for .card. Its descendants cannot out-rank outside elements solely by increasing their own z-index. When debugging an overlap, inspect the competing elements’ ancestor contexts and their order within a shared parent context. Also distinguish stacking contexts from browser compositing layers: their purposes differ, and creating a stacking context does not guarantee a dedicated GPU layer.
Key points to remember
- A stacking context is painted atomically within its parent; descendant z-index values cannot escape it.
- Relative or absolute positioning requires non-auto z-index; fixed and sticky positioning do not.
- Flex and grid items with non-auto z-index create contexts even without positioning.
- Opacity below 1, transforms, filters, isolation, blending, clipping, masking, and layout or paint containment can create contexts.
- will-change is conditional: naming transform or opacity creates a context, but naming an arbitrary property does not.
Common mistakes candidates make
- Assuming a sufficiently large z-index can overcome any ancestor stacking-context boundary.
- Claiming that position: relative alone creates a context, or that fixed and sticky require an explicit z-index.
- Treating every will-change declaration as a trigger or equating stacking contexts with GPU compositing layers.
Likely follow-up questions
Why can a tooltip with z-index: 9999 still appear behind another element?
Its ancestor may form a stacking context that is painted below the competing element’s context. Adjust the relevant ancestor’s stacking order or move the tooltip outside that context, rather than only increasing the tooltip’s z-index.
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 either way, so the distinction depends on the element’s layout and positioning.
Does opacity: 0 create a stacking context, and is the element still interactive?
Yes: 0 is below 1, so the element creates a stacking context even though it is fully transparent. Opacity alone does not remove it from layout, pointer hit testing, or keyboard focus order.
Interview tip: Start with the stacking-context boundary rule, group the main triggers, and use the .card example to explain why increasing a child’s z-index may not help.