CSS 定位層級遮蓋問題：z-index 無效的常見原因與 Flex/Grid 容器解決方案

現象

下層元素被上層遮蓋，設定 z-index 無效。

根本原因：父元素建立堆疊上下文

• 父元素擁有 position: relative/absolute/fixed 且 z-index 不為 auto。
• 父元素 opacity < 1、transform、filter、perspective 等。
• Flex/Grid 容器的子元素若設定 z-index，僅在容器內部排序，**無法穿透容器**與外部元素比較。

案例分析：固定高度導致內容溢出被截斷

.mmGrid { height: 300px; } /* 固定高度 */
.mmg-bodyWrapper { height: 100%; } /* 繼承固定高度 */

內容實際高度超過 300px 時被容器切掉，看似被遮蓋，實為 overflow: hidden（預設）截斷。

解決方案

1. 移除固定高度：讓容器隨內容撐開。
   .mmGrid, .mmg-bodyWrapper { height: auto; }
2. 允許溢出：.mmg-bodyWrapper { overflow: visible; }（需配合父層無堆疊上下文）。
3. 重構堆疊上下文：將需互動的元素移至同一堆疊上下文層級，或提升共同祖先的 z-index。

除錯技巧

• 開發者工具 → Elements → Computed → 查看 z-index 與 stacking context 標記。
• 暫時給可疑父元素加 outline: 1px solid red 觀察邊界。

總結

z-index 無效通常因父元素建立堆疊上下文或固定高度截斷內容。優先檢查 height/overflow、opacity/transform、Flex/Grid 容器特性，移除不必要的限制即可恢復層級控制。