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.
Interview answer drill
Use this CSS interview question to rehearse a quick answer, common mistake, follow-up, and production pitfall.
How does z-index work in CSS?Frontend interview 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 docs wording
- Z Index and Stacking Context reasoning, edge cases, and production failure modes
- How you would answer the most likely CSS interview follow-up
Interview quick answer
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
Each positioned element with a z-index forms a new stacking context. Elements inside one context are layered relative to each other but cannot overlap elements outside that context. Contexts are created by certain properties like:
position(relative, absolute, fixed) with z-index.opacity: 1transform,filter, orperspective.isolation: isolate;
Common Pitfalls
- Setting
z-indexon an element without a positioning context (e.g.,position: static) has no effect. - 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.
Debugging Tip
Use browser developer tools to inspect stacking contexts. Understanding which context your element belongs to is key to resolving unexpected layering issues.
Practical scenario
Ensure a dropdown appears above a sticky header and modal overlay.
Common pitfalls
- Forgetting z-index only works on positioned elements.
- Creating new stacking contexts with transforms or opacity.
- 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 elements.- Works only inside stacking contexts.
- Higher values appear above lower ones.
- Context isolation can cause seemingly incorrect overlaps — always check parent elements.
Similar questions
Guides
Preparing for interviews?
Use this as one explanation rep, then continue with the CSS interview questions cluster or a guided prep path.