CSS z-index 層疊上下文深度解析：為什麼子元素 z-index 無法超越父元素？

核心結論

子元素的 z-index 只在父元素創建的「層疊上下文」內比較，無法與父元素外部元素直接比較。 父元素的 z-index 決定了整個層疊上下文在父級上下文中的層級。

層疊上下文創建條件

以下任一條件會使元素創建**新的層疊上下文**：

• position: relative/absolute/fixed/sticky 且 z-index 不為 auto（數值、0 皆可）。
• opacity < 1
• transform / filter / perspective / clip-path / mask 等非 none 值。
• isolation: isolate
• will-change 指定上述屬性。
• Flex/Grid 容器的 z-index 不為 auto 的子項。

可視化類比

根層疊上下文 (html)
├── 父元素 A (z-index: 20) → 創建層疊上下文 A
│   ├── 子元素 A1 (z-index: 100) → 僅在 A 內比較
│   └── 子元素 A2 (z-index: 50)
└── 兄弟元素 B (z-index: 10) → 創建層疊上下文 B
    └── 子元素 B1 (z-index: 1000) → 僅在 B 內比較

**渲染順序**：A (z:20) 疊在 B (z:10) 上方 → A 內所有子元素**整體**疊在 B 及其子元素上方，無論 A1 z-index 多大。

實驗驗證

參考 JSFiddle 示例：

• 父容器 z-index: 20，子元素 z-index: 100。
• 父容器兄弟元素 z-index: 10。
• 結果：子元素雖 z-index 100 > 10，但**被父容器層級 20 限制**，無法覆蓋兄弟元素內部 z-index 1000 的元素。

常見誤區與解決方案

誤區：「我給子元素設 z-index: 9999 就能蓋住一切」

解決：

1. **提升父元素 z-index**，確保父層疊上下文層級足夠高。
2. **避免父元素創建層疊上下文**：去掉 position: relative + z-index、opacity 等觸發條件（若布局允許）。
3. **使用 Portal 模式**：將彈窗/提示等移出當前層疊上下文，直接掛載到 body（React/Vue 常用）。

誤區：「z-index 僅在 relative/absolute/fixed 中生效」

事實：z-index 只在**定位元素**或 **Flex/Grid 子項** 生效，但**創建層疊上下文**的條件更多（見上表）。

調試技巧

1. Chrome DevTools → Elements → Computed → 搜索 z-index，查看元素所在層疊上下文層級。
2. 安裝插件 「CSS Stacking Context Inspector」** 可視化層疊樹。
3. 給疑似元素加 outline: 1px solid red 觀察疊加順序。

總結

子元素 z-index **不與父元素比較**，而是在父元素創建的**層疊上下文內部**比較。父元素的層級決定了整個家族在外部的高度。理解「層疊上下文」是解決 z-index 疑難雜症的鑰匙。