CSS图片层叠布局疑问：父级relative子级absolute仍全图重叠（无固定高度）

你遇到的核心问题很明确：绝对定位的元素会完全脱离正常文档流。你给父div加了position:relative没错，但里面的两张图片都设成了position:absolute，这就导致父div没有任何元素来撑起它的高度，直接塌陷成了0高度。两个高度为0的父div自然会挤在一起，四张图片也就全部重叠了。

而且你要做响应式布局，固定高度确实不是最优解，我给你几个实用的解决方案，都能完美适配响应式需求：

方法1：让底层图片留在文档流（最简单的方案） #

把每组里的底层图（比如image1、image3）去掉绝对定位，让它正常占据父div的空间，父div就会自动根据这张图片的尺寸自适应高度，顶层图再用绝对定位覆盖上去就行：

<div style="position:relative;">
  <!-- 底层图：不设绝对定位，撑父容器高度 -->
  <img src="images/image1.jpg" style="width:100%; display:block;" />
  <!-- 顶层图：绝对定位覆盖 -->
  <img src="images/image2.jpg" style="position: absolute; top:0; left:0; width:100%;" />
</div>
<!-- 第二组，加个margin-top区分开两组 -->
<div style="position:relative; margin-top:1rem;">
  <img src="images/image3.jpg" style="width:100%; display:block;" />
  <img src="images/image4.jpg" style="position: absolute; top:0; left:0; width:100%;" />
</div>

这里加width:100%是让图片自适应父容器宽度，display:block是为了去掉图片默认的底部空白，避免多余间距。

方法2：用padding-top比例固定容器高度（适合图片比例固定的场景） #

如果你的图片是固定比例（比如16:9、4:3），可以利用CSS中padding-top百分比是相对于父容器宽度的特性，给父div设置一个和图片比例匹配的padding-top值，这样父div会跟着宽度自动调整高度，绝对定位的图片就能铺满整个容器：

<!-- 假设图片是16:9比例，padding-top = 9/16*100% = 56.25% -->
<div style="position:relative; width:100%; padding-top:56.25%; overflow:hidden;">
  <img src="images/image1.jpg" style="position: absolute; top:0; left:0; width:100%; height:100%; object-fit:cover;" />
  <img src="images/image2.jpg" style="position: absolute; top:0; left:0; width:100%; height:100%; object-fit:cover;" />
</div>
<div style="position:relative; width:100%; padding-top:56.25%; overflow:hidden; margin-top:1rem;">
  <img src="images/image3.jpg" style="position: absolute; top:0; left:0; width:100%; height:100%; object-fit:cover;" />
  <img src="images/image4.jpg" style="position: absolute; top:0; left:0; width:100%; height:100%; object-fit:cover;" />
</div>

object-fit:cover能让图片保持原有比例铺满容器，不会拉伸变形，你也可以根据需求换成contain（完整显示图片）或者其他值。

方法3：用CSS Grid布局（现代浏览器首选） #

Grid布局天生适合做层叠效果，代码更简洁，还不用处理定位和高度塌陷的问题，父容器会自动根据图片高度自适应：

<div style="display:grid;">
  <!-- grid-area:1/1 让两张图放在同一个网格单元格里，自动层叠 -->
  <img src="images/image1.jpg" style="grid-area:1/1; width:100%;" />
  <img src="images/image2.jpg" style="grid-area:1/1; width:100%;" />
</div>
<div style="display:grid; margin-top:1rem;">
  <img src="images/image3.jpg" style="grid-area:1/1; width:100%;" />
  <img src="images/image4.jpg" style="grid-area:1/1; width:100%;" />
</div>

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