CSS - 相对定位的 div 重叠

Question

我有一个基本的布局，上面和下面都有一段文字和这样的图像。

 .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>

为什么下面的div 与图像重叠？ 由于图像绝对位于相对定位的div内，因此它不会破坏布局吗？

Answer 1

您应该为相对位置定义高度和/或宽度，因为一旦您给元素绝对值，它就会退出流程，因此您必须将高度和宽度100% 设置为绝对值，然后它正在寻找具有高度和宽度的父项以正确的方式运行

 .image_holder img {
  position:absolute;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
}
 .image_holder {
    position:relative; 
    width: 300px; 
    height: 300px
}

<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; height: 300px; width: 300px">
    <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>

Answer 2

您需要

在"image_holder"上设置高度，因为它的高度为0px。您可以在浏览器的开发人员工具中轻松看到这一点。元素从其内容中获取其高度，并且由于image_holder的内容(即图像(是绝对定位的，因此它不会添加父元素的高度。在这种情况下，您需要手动设置高度，但对于这样的简单布局，您可能不应该使用 position：absolute 。