本文详解如何通过 position: relative 与 position: absolute 结合 z-index，让每对图片在其独立 .container 内正确层叠，同时支持无需显式 class、仅靠 :nth-child() 选择器实现语义更简洁的叠放方案。
本文详解如何通过 `position: relative` 与 `position: absolute` 结合 `z-index`，让每对图片在其独立 `.container` 内正确层叠，同时支持无需显式 class、仅靠 `:nth-child()` 选择器实现语义更简洁的叠放方案。
要实现“多组图片各自独立叠放”，关键在于建立独立的定位上下文（containing block）。若直接对所有 .base 和 .overlay 设置 position: absolute，它们将脱离文档流并相对于最近的已定位祖先（或初始包含块）定位，导致全部图片重叠在页面左上角——这正是原问题中“mess all 4 images together”的根本原因。
✅ 正确做法：为每个容器创建定位上下文
只需将 .container 设为 position: relative（不需偏移，仅创建包含块），再将叠放图片设为 position: absolute 并锚定到容器左上角即可：
.container {
position: relative; /* 创建独立定位上下文 */
display: inline-block; /* 可选：避免容器独占一行，保持水平排列 */
/* 建议添加 width/height 或 min-width/min-height 防止塌陷 */
}
.base {
position: relative; /* 保持文档流位置，作为底层基准 */
z-index: 1;
}
.overlay {
position: absolute; /* 相对于 .container 定位 */
top: 0;
left: 0; /* 与 base 完全重合 */
z-index: 2;
}对应 HTML 保持清晰语义：
<div class="container"> <img class="base" src="img1.jpg" alt="Base image 1"> <img class="overlay" src="img2.jpg" alt="Overlay image 1"> </div> <div class="container"> <img class="base" src="img3.jpg" alt="Base image 2"> <img class="overlay" src="img4.jpg" alt="Overlay image 2"> </div>
✨ 进阶技巧：免 class 的纯 CSS 叠放（:nth-child 方案）
若希望 HTML 更简洁（不依赖 class="base"/class="overlay"），可利用 :nth-child() 精准定位每组内的第一张和第二张图：
立即学习“前端免费学习笔记（深入）”；
.container {
position: relative;
display: inline-block;
}
/* 第一张图：作为底层，保持相对定位 */
.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 即可简化为：
<div class="container"> <img src="img1.jpg" alt="Layer 1"> <img src="img2.jpg" alt="Layer 2"> </div> <div class="container"> <img src="img3.jpg" alt="Layer 3"> <img src="img4.jpg" alt="Layer 4"> </div>
⚠️ 注意事项：
- :nth-child(n) 按 DOM 顺序计数，确保 .container 内只有 <img> 元素（无空格文本节点、注释或其它标签），否则序号可能错位；若存在其他子元素，推荐改用 :nth-of-type(img) 更健壮。
- 所有图片建议设置明确 width/height 或 max-width: 100%，避免因尺寸差异导致错位。
- 若需响应式叠放，可结合 object-fit: cover 与容器宽高约束，确保覆盖效果一致。
此方案兼顾语义性、可维护性与浏览器兼容性（:nth-child 支持 IE9+），是现代 CSS 图片叠放的推荐实践。
