CSS 中 z-index 失效的常见原因及解决方案

2026-02-02 00:00:00 作者：碧海醫心

z-index 仅对已定位元素（position 为 relative/absolute/fixed/sticky）或 flex 项目生效；若元素未显式设置 position 属性，即使声明了 z-index 也不会产生层叠效果。本文详解其原理、典型误用场景及正确修复方法。

在 CSS 层叠上下文（stacking context）模型中，z-index 并非全局“谁数字大谁在上”，而是受层叠上下文创建规则和元素定位状态双重约束。一个常见却极易被忽视的陷阱是：未定位的元素（即 position: static，默认值）完全忽略 z-index 声明——无论你写 z-index: 9999 还是 z-index: -1，浏览器都会静默忽略。

回顾你的代码片段：

.slideshow__inner img {
  display: block;
  width: 70%;
  height: auto;
  position: absolute; /* ✅ 此处已设 absolute —— 但注意：它作用于所有 img！ */
  top: 0;
  left: 0;
  transform: translateZ(0.1px);
}

表面上看，img 已设 position: absolute，理应支持 z-index。但问题出在 DOM 结构与定位上下文嵌套关系上：

   
    @@##@@ 
  
   
    @@##@@ 
  
   
    @@##@@

关键点在于：三个分别位于三个独立的、同级的 .slideshow__inner 容器中，而每个容器都设置了 position: relative —— 这意味着每个 img 都创建了独立的层叠上下文，且它们的 z-index 仅在各自父容器内有效。此时，决定最终视觉层叠顺序的，是父容器 .slideshow__inner 在 DOM 中的顺序（后出现的元素默认覆盖先出现的），而非 img 自身的 z-index 值。

立即学习“前端免费学习笔记（深入）”；

因此，.CC 图片虽 z-index: 2，但它所在的 .slideshow__inner.active 是第三个子元素，自然覆盖前两个容器及其内部图片 —— 这正是你观察到“低 z-index 反而显示在最上层”的真实原因。

✅ 正确解法分两步：

确保 z-index 生效的前提：元素必须定位
你的 img 已设 position: absolute，这步满足（无需改为 relative——原答案建议 position: relative 是误导性方案，会破坏绝对定位布局）。
统一层叠上下文：将 z-index 应用于同级可比较的容器
将 z-index 移至 .slideshow__inner 元素上，并配合 position: relative 控制整体层级：

/* 移除 img 上的 z-index，改由父容器控制 */
.slideshow__inner {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
}

/* 关键：为每个 .slideshow__inner 设置 z-index */
.slideshow__inner:nth-child(1) { z-index: 1; } /* AA 所在容器 */
.slideshow__inner:nth-child(2) { z-index: 2; } /* BB 所在容器 */
.slideshow__inner:nth-child(3) { z-index: 3; } /* CC 所在容器（active） */

/* 同时确保 img 绝对定位不脱离文档流 */
.slideshow__inner img {
  position: absolute;
  top: 0; left: 0;
  width: 70%; height: auto;
}

⚠️ 注意事项：