CSS z-index 失效？必須搭配 position 才能生效

核心規則

z-index 僅對定位元素 (position ≠ static) 生效。 預設 position: static 時，z-index 被忽略。

正確用法

.top-layer {
    position: absolute;  /* 或 relative, fixed, sticky */
    z-index: 9999;       /* 數值越大越上層 */
}

定位類型差異

常見坑點

• 父元素建立了**堆疊上下文** (如 opacity < 1, transform, filter)，子元素 z-index 無法跨越父層級比較。
• Flex/Grid 容器的子元素若無 z-index，依 DOM 順序疊加。

除錯技巧

開發者工具 → Elements → Computed → 搜尋 z-index，查看實際生效值與堆疊上下文層級。