CSS相对定位容器内绝对定位图片为何被下方div重叠？

先把你的代码贴出来方便分析：

.image_holder img {position:absolute;top:0;left:0;}
.image_holder{position:relative;}

<div class="test1">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tellus mauris, pharetra a ligula ut, aliquam accumsan sem. Etiam semper, mauris vel congue laoreet, tellus quam ultrices mi, vel fringilla magna tortor eu massa. Phasellus aliquet semper lacus. Nullam vehicula purus non nunc facilisis tincidunt posuere ut lacus. In viverra viverra bibendum. Sed placerat mollis scelerisque. Sed ultricies diam ut velit ornare molestie. Nam commodo elit lorem, vel fringilla dui venenatis non. Duis condimentum nisl ut risus egestas malesuada. In at accumsan ex. Curabitur quis magna sodales, laoreet dui nec, ullamcorper libero. Integer rhoncus, magna non rutrum scelerisque, leo odio ornare sapien, a ullamcorper nunc urna a risus. Duis sit amet diam sollicitudin, condimentum enim nec, ullamcorper erat.
</div>
<div class="image_holder" style="position:relative;">
  <img id="image1" src="https://dummyimage.com/600x400/000/fff">
</div>
<div class="test2">
  Quisque pulvinar sapien ipsum, a dapibus nulla auctor venenatis. Etiam pretium nec mauris eu dictum. Maecenas et sollicitudin orci. Etiam mattis tincidunt lacus, malesuada imperdiet quam consequat non. Aliquam ex lorem, pulvinar ac egestas nec, rutrum et elit. Duis vitae semper mauris. Curabitur sem sapien, accumsan quis risus a, dictum feugiat tellus. Donec vitae pulvinar orci. Duis dapibus odio ut luctus congue. Praesent egestas orci eget tortor aliquam fermentum. Donec mollis et tellus eget ullamcorper.
</div>

你疑惑的点非常到位，但这里有个容易被忽略的CSS核心规则：绝对定位的元素会完全脱离正常文档流。也就是说，这张图片虽然放在.image_holder里，但它不会给父容器贡献任何高度——父容器里没有其他处于文档流内的元素，所以它的高度直接塌陷成了0。这样一来，下面的.test2 div就会紧贴着.test1的底部，自然就和悬浮在上方的图片重叠了。

你给.image_holder设置position:relative是对的，这能让图片的绝对定位以父容器为参考点（而不是整个页面），但这个属性只负责定位的参考系，并不会改变绝对定位元素脱离文档流的特性，所以父容器还是不会被图片“撑起来”。

下面给你几个常用的解决办法，按需选择：

1. 给父容器设置固定高度（适合固定尺寸图片） #

既然你的图片尺寸是600x400，直接给.image_holder设置和图片一致的高度就行：

.image_holder {
  position: relative;
  height: 400px; /* 和图片高度匹配 */
}

这个方法简单粗暴，适合图片尺寸固定的场景。

2. 用padding-top模拟高度（适合响应式场景） #

如果需要图片自适应宽度，保持宽高比，可以利用padding-top的百分比特性（百分比基于父元素的宽度）。你的图片宽高比是3:2，所以padding-top设为66.67%（400/600*100%）：

.image_holder {
  position: relative;
  width: 100%;
  padding-top: 66.67%; /* 对应3:2的宽高比 */
}
.image_holder img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 可选，防止图片拉伸变形 */
}

这样容器高度会随宽度自动调整，完美适配响应式布局。

3. 使用aspect-ratio属性（现代CSS推荐方案） #

如果不需要兼容IE这类旧浏览器，直接用CSS3的aspect-ratio属性设置容器的宽高比，代码最简洁：

.image_holder {
  position: relative;
  aspect-ratio: 3/2; /* 和图片宽高比一致 */
}
.image_holder img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

这个方法是目前最优雅的解决方案，推荐在现代项目中使用。

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