用z-index控制图片层级的前提是元素必须定位（如relative、absolute），否则z-index无效；需注意层叠上下文限制，避免opacity、transform等触发新上下文导致z-index失效。

用 z-index 控制图片层级的前提是定位

直接给 标签加 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 是相对于该容器的层叠上下文，不是全局。

示例场景：一个带边框的卡片里放两张图，想让第二张盖住第一张：

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

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

• 两张图都在同一个 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 顺序失效。

所以别指望靠调整 标签在 HTML 中的位置来控制覆盖关系，尤其在复杂布局中——这不可靠，且难以维护。

真正要动手的地方只有两个：确保 position 设置正确，然后在正确的上下文里设合理的 z-index 值。其他花招，比如套多层 div 硬撑高度或滥用 margin 挤位置，只会让层叠逻辑更难追踪。