先看這個例子
low 父層的 z-index 是 1，child 內層是 9999，重疊的 high 同級則是 2。父層脈絡仍較低，內層不能靠大數字越過同級。
| 情況 | 輸入或查看方法 | 結果與意思 |
|---|---|---|
| 父層脈絡 | 讀 low z-index | 1 |
| 內層子元素 | 讀 child z-index | 9999，仍在父層脈絡內 |
| 重疊命中 | 在 stage 中心查 elementFromPoint | 最上層是 high |
瀏覽器怎樣處理
堆疊脈絡相對同級時是一個整體。內層 z-index 只在整體之內排序，不會跳出去。中心命中測試是瀏覽器實際觀察，截圖底色只作輔助。
提高父層，結果才會改變
對照把 low 從 1 改成 3，child 仍為 9999，high 仍為 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">內層面板</section></section><section class="high">同級面板</section></section>中心現在命中 child。改父層脈絡，才改變同級排序；不需要繼續加大子元素數字。
試着修正
正例只把 child9999 改成 99999，會蓋過 high2 嗎？
查看參考答案
不會，low 父層仍是脈絡 1，在同級脈絡 2 之下。
- 查完整堆疊上層關係。
- 在量度出的重疊位置記命中結果。