用z-index控制图片层级的前提是元素必须定位（如relative、absolute），否则z-index无效；需注意层叠上下文限制，避免opacity、transform等触发新上下文导致z-index失效。
用 z-index 控制图片层级的前提是定位
直接给 <img> 标签加 z-index 没用，因为 z-index 只对「定位元素」生效。必须先给图片设置 position（如 relative、absolute 或 fixed），否则 z-index 被忽略。
常见错误现象：z-index: 999 写了但图层没变化，大概率是漏了 position。
-
position: relative最安全，不脱离文档流，适合微调叠放顺序 -
position: absolute常用于叠加图层（比如头像+徽章、主图+水印） - 避免对
position: static（默认值）元素设z-index
多个图片叠放时，z-index 数值决定上下关系
数值越大越靠前，但只在**同级定位上下文**中比较。如果父容器有 position + z-index，子元素的 z-index 是相对于该容器的层叠上下文，不是全局。
示例场景：一个带边框的卡片里放两张图，想让第二张盖住第一张：
立即学习“前端免费学习笔记（深入）”；
<div style="position: relative; border: 1px solid #ccc;"> <img src="a.jpg" style="position: relative; z-index: 1;"> <img src="b.jpg" style="position: absolute; top: 10px; left: 10px; z-index: 2;"> </div>
- 两张图都在同一个
relative容器内，z-index: 2的图会盖住z-index: 1的图 - 如果把第二张图移到容器外，或其父级另有一个
z-index: 0的定位块，那它可能被整体压到下面 - 不要依赖超大数字（如
999999），优先理清层叠上下文结构
z-index 不生效？检查是否触发了新的层叠上下文
除了 position + z-index，以下 CSS 属性也会创建独立的层叠上下文，导致子元素的 z-index 在内部排序，无法越过父级影响外部：
-
opacity小于 1（如opacity: 0.99） -
transform非none（如transform: translateZ(0)） -
filter非none -
will-change设为transform等属性
典型问题：给图片加了 filter: blur(1px) 后，再怎么调 z-index 也盖不住隔壁没加滤镜的图——因为两者已不在同一层叠上下文中。
纯 HTML 结构顺序不能替代 z-index 控制
虽然 DOM 后面的元素默认渲染在前面元素之上（即“源顺序”有影响），但这只适用于**非定位元素之间**。一旦任一元素被定位，层叠规则就以 z-index 和层叠上下文为准，DOM 顺序失效。
所以别指望靠调整 <img> 标签在 HTML 中的位置来控制覆盖关系，尤其在复杂布局中——这不可靠，且难以维护。
真正要动手的地方只有两个：确保 position 设置正确，然后在正确的上下文里设合理的 z-index 值。其他花招，比如套多层 div 硬撑高度或滥用 margin 挤位置，只会让层叠逻辑更难追踪。
