z-index 仅对已定位元素（position ≠ static）生效，而示例中 img 元素虽设置了 z-index，却未显式声明 position 属性，导致层叠顺序失效；正确做法是为所有需参与 z-index 排序的元素添加 position: relative/absolute 等值。
在 CSS 层叠上下文（stacking context）机制中，z-index 并非“全局优先级开关”，而是一个依赖于定位上下文的相对排序属性。它只对 position 值为 relative、absolute、fixed 或 sticky 的元素生效——而 默认是 position: static，此时无论设置 z-index: 999 还是 z-index: -1，均被浏览器完全忽略。
回顾你的代码片段：
.slideshow__inner img {
display: block;
width: 70%;
height: auto;
position: absolute; /* ✅ 此处已设 absolute —— 但注意：它被后续规则覆盖！ */
top: 0;
left: 0;
transform: translateZ(0.1px);
}
.slideshow__inner img.AA { z-index: 4; }
.slideshow__inner img.BB { z-index: 3; }
.slideshow__inner img.CC { z-index: 2; }表面看 img 已设 position: absolute，但关键问题在于：.slideshow__inner img 是一个通用选择器，而 .AA/.BB/.CC 是类选择器，它们并未重复声明 position。如果存在其他更高优先级样式（如重置规则、CSS 框架默认样式或后续 !important 声明），position 可能被意外覆盖为 static，从而让 z-index 归零失效。
✅ 正确修复方式（推荐）： 为每个带 z-index 的图片类显式、独立地声明定位类型，避免依赖父级规则：
.slideshow__inner img.AA {
position: absolute; /* 显式声明，确保生效 */
z-index: 4;
}
.slideshow__inner img.BB {
position: absolute;
top: 15%;
left: 15%;
z-index: 3;
}
.slideshow__inner img.CC {
position: absolute;
top: 30%;
left: 30%;
z-index: 2;
}⚠️ 额外关键点（常被忽视）：
立即学习“前端免费学习笔记（深入）”；
- 层叠上下文隔离：若某个祖先元素（如 .slideshow__inner）自身创建了新的层叠上下文（例如设置了 opacity
- 文档流顺序优先级：当 z-index 相同或无效时，DOM 顺序决定覆盖关系——后出现的元素自然盖住先出现的。你的 HTML 中 .CC 在最后，即使 z-index: 2 最小，也可能因 position: static 失效而靠 DOM 顺序“获胜”。
? 调试建议：
- 在浏览器开发者工具中检查每个
元素的 Computed → position，确认是否为 absolute/relative；
- 查看 Computed → z-index，若显示 auto，说明 z-index 未生效；
- 使用 outline: 2px solid red 临时标记元素，直观验证渲染顺序。
总结：z-index 不是魔法数字，而是层叠上下文内的坐标轴。先确保 position ≠ static，再设置 z-index，最后检查上下文边界——三者缺一不可。遵循此原则，即可彻底规避“明明写了 z-index 却不生效”的经典陷阱。
