本文详解如何通过 position: relative + position: absolute 配合 z-index，让每对图片在其独立 .container 内完成层叠（如 img2 叠于 img1 之上），并支持无需额外 class、仅靠 :nth-child 选择器自动识别图层顺序的优雅写法。
本文详解如何通过 position: relative + position: absolute 配合 z-index，让每对图片在其独立 .container 内完成层叠（如 img2 叠于 img1 之上），并支持无需额外 class、仅靠 :nth-child 选择器自动识别图层顺序的优雅写法。
要实现“多组图片各自独立叠加”，核心在于建立独立的定位上下文。若直接对所有 <img> 设置 position: absolute，它们将脱离文档流并相对于最近的已定位祖先（或初始包含块）定位，导致所有图片堆叠在同一位置——这正是原问题中“4 张图混在一起”的根本原因。
✅ 正确做法是：为每个 .container 设置 position: relative，使其成为其内部绝对定位元素的参考容器；再将需要叠加的图片（如第二张）设为 position: absolute，并通过 top: 0; left: 0 精确覆盖在第一张图上。
以下是完整、可直接运行的解决方案：
.container {
position: relative; /* 创建独立定位上下文 */
display: inline-block; /* 避免宽度撑满父容器，保持自然尺寸 */
/* 可选：添加 margin 或 max-width 控制布局 */
}
/* 第一张图：作为底层，使用 relative 保持文档流位置，并设 z-index 确保在下层 */
.container img:nth-child(1) {
position: relative;
z-index: 1;
}
/* 第二张图：绝对定位，覆盖在第一张图正上方 */
.container img:nth-child(2) {
position: absolute;
top: 0;
left: 0;
z-index: 2;
}对应的 HTML 无需任何 class，语义简洁：
立即学习“前端免费学习笔记（深入）”；
<div class="container"> <img src="img1.jpg" alt="Base image 1"> <img src="img2.jpg" alt="Overlay image 1"> </div> <div class="container"> <img src="img3.jpg" alt="Base image 2"> <img src="img4.jpg" alt="Overlay image 2"> </div>
? 关键原理说明：
- position: relative 在 .container 上启用，不改变自身位置，但为子元素提供定位锚点；
- :nth-child(1) 和 :nth-child(2) 精准匹配每组中的首图与次图，彻底避免手动添加 class="base"/class="overlay"；
- z-index 确保层叠顺序可控（即使图片 DOM 顺序不变，视觉上仍可调整上下关系）；
- display: inline-block 让多个 .container 水平排列；若需垂直堆叠，可改用 display: block 或 Flex/Grid 布局。
⚠️ 注意事项：
- 所有 <img> 必须位于同一 .container 内且顺序固定（第一张为底，第二张为盖），否则 :nth-child 将失效；
- 若容器内存在其他元素（如 <p> 或 <span>），请改用 :nth-of-type(img) 或更稳妥的 :first-child / :last-child 组合；
- 建议为 <img> 设置 max-width: 100%; height: auto; 防止溢出，并统一宽高样式以保证对齐；
- 如需响应式叠加（如移动端居中覆盖），可配合 transform: translate(-50%, -50%) 与 top: 50%; left: 50% 实现。
该方案兼顾语义性、可维护性与扩展性——既支持动态生成的图片对，也便于后续添加 hover 效果、过渡动画或 JavaScript 交互控制。
