Inspect the working example
The low parent has z-index 1. Its child has 9999. The overlapping high sibling has z-index 2. The child cannot outrank that sibling because the parent context remains lower.
| Case | Input or inspection | Result and meaning |
|---|---|---|
| Parent context | Read low z-index | 1 |
| Nested child | Read child z-index | 9999, still within the parent context |
| Overlap hit | elementFromPoint at stage center | high is topmost |
Follow the browser mechanism
A stacking context behaves as a unit relative to sibling contexts. Nested z-index values order content within that unit rather than escaping it. The center hit-test is an actual browser observation; screenshot colors are supporting evidence only.
Raising the parent changes the result
The contrast raises low from 1 to3 while the child remains 9999 and high remains 2.
<style>body{margin:8px}</style>
<style>.stage{position:relative;width:200px;height:100px}.low{position:absolute;inset:0;z-index:3}.child{position:absolute;inset:0;z-index:9999;background:#e3efe8}.high{position:absolute;inset:20px;z-index:2;background:#23715d;color:white}</style><section class="stage"><section class="low"><section class="child">Nested panel</section></section><section class="high">Sibling</section></section>The center hit now returns child. Changing the parent context, not another child-digit escalation, changes sibling ordering.
Try the repair
Would changing child 9999 to99999 alone lift it over high 2 in the working source?
Show the worked answer
No. The low parent remains in context 1 beneath sibling context 2.
- Inspect the complete stacking ancestor chain.
- Record the hit-test at a measured overlap point.