如何用CSS实现多组图片在各自div容器内叠加显示？

问题原因 #

你之前的CSS导致图片混乱，核心原因是没给.container设置定位上下文。当元素用position: absolute时，如果父级没有设置position: relative/absolute/fixed，它会相对于整个文档（body）定位，而非父容器，所有图片自然会挤到同一位置。

方案1：区分base和overlay类名的情况 #

给.container设置position: relative作为定位基准，再让两张图片都相对于容器绝对定位，就能实现每组内的图片叠加：

.container {
  position: relative;
  /* 可选：固定容器尺寸，和图片大小匹配即可 */
  width: 300px;
  height: 200px;
  /* 可选：让容器并排显示，默认块级元素会占满一行 */
  display: inline-block;
  margin-right: 20px;
}

.base, .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 可选：明确层级确保overlay在base上方，默认后面的元素层级更高，这步可省略 */
.overlay {
  z-index: 1;
}

对应HTML保持原有结构：

<div class="container">
  <img class="base" src="img1.jpg">
  <img class="overlay" src="img2.jpg">
</div>

<div class="container">
  <img class="base" src="img3.jpg">
  <img class="overlay" src="img4.jpg">
</div>

方案2：不区分类名，同一容器内图片自动叠加 #

不需要给图片加类名，直接通过容器选择器让内部所有图片叠加：

.container {
  position: relative;
  width: 300px;
  height: 200px;
  display: inline-block;
  margin-right: 20px;
}

.container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

对应HTML用你给出的无类名版本：

<div class="container">
  <img src="img1.jpg">
  <img src="img2.jpg">
</div>

<div class="container">
  <img src="img3.jpg">
  <img src="img4.jpg">
</div>

说明：同一容器内后面的img会默认覆盖前面的img，完全符合需求。如果需要调整层级，给特定img加z-index属性即可。

内容的提问来源于stack exchange，提问作者SamTest