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;
}⚠️ 注意事项：
- 不要依赖 transform: translateZ() 创建层叠上下文来绕过定位限制——它可能触发新层叠上下文，反而加剧层级混乱；
- 避免滥用 opacity
- 使用浏览器开发者工具的“Layers”面板（Chrome）或“Computed”标签页检查元素是否真正参与层叠排序；
- 当需精细控制子元素层级时，优先考虑扁平化结构（如所有 img 同属一个 position: relative 父容器），再用 z-index 直接管理。
总结：z-index 不是魔法数字，而是层叠上下文内的相对坐标。理解“定位是前提，父级是范围，DOM 顺序是兜底规则”，才能真正掌控 CSS 层叠行为。
