z-index bugs are usually stacking-context bugs. Explain layering, positioned elements, transforms or opacity, and why huge numbers fail when the wrong element owns the stacking context.
Frontend interview practice question
How does z-index work in CSS?
Interview quick answer
Interview focus
This CSS interview question tests whether you can explain CSS z-index debugging: stacking contexts, layering bugs, and why bigger numbers fail, connect it to production trade-offs, and handle common follow-up questions.
- CSS z-index debugging: stacking contexts, layering bugs, and why bigger numbers fail explanation without falling back to memorized definitions
- Z Index and Stacking Context reasoning, edge cases, and production failure modes
- How you would answer the most likely CSS interview follow-up
Interview answer drill
Use this CSS interview question to rehearse a quick answer, common mistake, follow-up, and production pitfall.
Full interview answer
Debug lens
Most z-index bugs are not about picking a larger number. They happen because the wrong stacking context owns the layer order. Once opacity, transform, filters, or positioned ancestors create a new context, your huge z-index value may still lose. That is why z-index debugging is really stacking-context debugging.
Value Type | Example | Meaning |
|---|---|---|
Auto | z-index: auto; | Default stacking within the same context. |
Positive Integer | z-index: 10; | Element appears above those with smaller values. |
Negative Integer | z-index: -1; | Element appears below normal stacking order. |
Example: Layering Elements
CSS
.box1 { position: relative; z-index: 1; background: lightblue; }
.box2 { position: relative; z-index: 2; background: coral; }
.box3 { position: relative; z-index: 0; background: lightgreen; }
In this example, .box2 appears above .box1 and .box3 because it has the highest z-index value.
Stacking Context
Positioned elements with a non-auto z-index can establish a new stacking context; fixed and sticky positioned elements establish one even when z-index is auto. Descendants are ordered inside that context and cannot escape it merely by using a larger number. Other context triggers include:
opacityvalues below1.transform,filter, orperspectivevalues other thannone.isolation: isolate;
Common Pitfalls
- Nested stacking contexts can cause confusion — an element may appear behind another even if it has a higher z-index, depending on its parent’s context.
<li>For ordinary boxes, a static-positioned element's z-index does not apply. Flex and grid items are an important exception: they can participate in z-ordering without becoming positioned.Debugging Tip
Use browser developer tools to inspect stacking contexts. Understanding which context your element belongs to is key to resolving unexpected layering issues.
Sticky works but looks broken?
If the element follows the sticky threshold but another layer covers it, then paint order or a parent stacking context is the likely problem. If it never reaches the threshold at all, changing z-index cannot fix the scroll geometry. Use the position: sticky diagnostic to distinguish those two failures before changing the layer scale.
Practical scenario
Ensure a dropdown appears above a sticky header and modal overlay.
Common pitfalls
- Assuming
z-indexis global, or forgetting that flex and grid items are exceptions to the usual positioned-box rule. - Creating new stacking contexts with transforms or opacity below
1. - Using huge z-index values without a scale.
Central z-index scales reduce chaos. Test overlays in combination (dropdown + modal).
Still so complicated?
Think of z-index like layers in Photoshop — each element lives on a sheet. The higher the z-index, the closer to your eyes it appears. But if it's in a different folder (stacking context), it can’t overlap layers in another folder.
Summary
z-indexcontrols visual stacking of positioned boxes and flex or grid items.- Comparisons happen inside stacking contexts, not on one global number line.
- Higher values appear above lower values only when the relevant boxes are comparable in the same context.
- Context isolation can cause seemingly incorrect overlaps — always check parent elements.
Guides
Preparing for interviews?
Use this as one explanation rep, then continue with the CSS interview questions cluster or a guided prep path.
Open frontend interview questionsPractice more CSS interview questionsOpen HTML/CSS interview questionsOpen Essential 60Open Machine Coding HubOpen Question LibraryOpen system design questionsOpen interview preparation guideOpen system design blueprintOpen framework prep pathsOpen Study PlansOpen 7-day crash study planBrowse company questions