要让图片盖在背景图之上，必须先设 position（如 relative 或 absolute）使其成为定位元素，再用 z-index 控制层级；仅设 z-index 无效，因 static 元素不支持该属性。
图片要盖在背景图之上，核心就一条：让它成为“定位元素”，再用 z-index 显式声明层级。直接给 <img> 写 z-index 无效，因为默认是 position: static —— 这个状态下的 z-index 被浏览器完全忽略。
为什么 z-index 加了也不起作用？
常见错误是只写 z-index: 999，却漏掉 position。CSS 规范明确要求：只有 position 值为 relative、absolute、fixed 或 sticky 的元素，z-index 才生效。
- 检查目标
<img>是否有position: relative（最安全，不脱离文档流）或position: absolute（适合精确叠加） - 如果父容器也设了
position+z-index，子图的z-index是相对于该父容器的层叠上下文，不是全局比较 - 避免同时对前景图加
transform、filter或opacity：这些会创建新层叠上下文，导致它无法压过同级但没触发上下文的背景图
背景图该用 <img> 还是 background-image？
取决于语义和控制粒度：
- 用
background-image（如设在<div class="hero"> 上）：适合纯装饰性背景，可轻松用 <code>background-size: cover、background-position: center控制缩放与定位 - 用
<img src="bg.jpg">：仅当你需要 SEO 可读性、响应式sizes/srcset、或 JS 动态替换时才选；但必须包裹在position: relative容器里，否则无法可靠控制叠加关系 - 别混用：比如给
<img>标签写background-image—— 这个属性对<img>无效，纯属无效代码
如何让前景图精准叠在背景图中央？
关键不是靠 margin 或 DOM 顺序，而是靠定位容器 + 绝对定位 + 居中偏移：
<div class="overlay-container">
<div class="bg" style="background-image: url('bg.jpg'); background-size: cover;"></div>
@@##@@
</div>
对应 CSS：
.overlay-container {
position: relative;
width: 100%;
height: 400px;
}
.bg {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
}
.overlay {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
}
-
top: 50%; left: 50%把图片左上角移到中心点 -
transform: translate(-50%, -50%)把自身中心对齐到容器中心（比手动算宽高更可靠） - 必须确保
.overlay-container有position: relative，否则.overlay会相对于定位，一缩放就错位
多个图层叠加时最容易被忽略的点
真正难调的不是单张图，而是当背景图、文字、按钮、水印全挤在一个容器里时——这时你得盯住两件事：
- 每个参与层叠的元素是否都有明确的
position（哪怕只是relative），否则它的z-index就是废的 - 有没有无意中触发了层叠上下文：比如给某张图加了
filter: blur(0.5px)，它立刻自成一个“小世界”，再大的z-index也出不去这个边界 -
z-index数值本身不重要，重要的是相对关系：只要保证前景图的z-index大于它所在层叠上下文内其他兄弟元素即可，不需要堆到 9999
