z-index only compares elements within the same stacking context. Senior developers debug overlays by finding which ancestor created a new context—not by raising numbers blindly.
What creates a stacking context (common triggers)
positionwithz-indexnotautoopacityless than 1transform,filter,isolation: isolate- Flex/grid items with
z-index
Layering strategy for apps
- Define tokens:
--z-dropdown: 100,--z-modal: 200,--z-toast: 300. - Keep overlays in a top-level portal or dedicated root when frameworks allow.
- Document which component owns which layer.
Challenge
Fix the buried dropdown
- In the playground, the menu is clipped/hidden—find the parent with
overflow: hiddenor a low stacking context. - Fix by moving the menu in the DOM or adjusting overflow/isolation on the right ancestor.
Done when: the dropdown appears above the card border and remains clickable.
Go deeper — Interview answer: “z-index 9999 did nothing” (intermediate / experienced)
Strong answer: “I inspected the stacking context tree. A parent with transform and z-index: 1 trapped the modal. I moved the overlay to the document root / raised the correct context / removed accidental opacity on a wrapper.” Weak answer: “I kept increasing z-index until it worked.”
Interview prep
- Debugging steps when overlays fail?
Inspect stacking contexts, check overflow/transform on ancestors, verify portal placement, use documented z-index scale—not infinite 9999.