Question

我有一个基本的布局，上面和下面有一个文本块，像这样的图像..

＆＃13;

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

＆＃13;

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

＆＃13;

为什么以下div与图像重叠？由于图像是absolutley位于相对位置div内部，那么它不会打破布局？

Answer 1

您应该为相对位置定义高度和/或宽度，因为一旦您提供了绝对元素它离开流程，所以你必须将高度和宽度 100％设置为绝对然后它寻找一个父高度和宽度，以正确的方式行事

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您需要在“image_holder”上设置高度，因为它的高度为0px。您可以在浏览器的Developer Tools中轻松查看。元素从其内容中获取高度，并且由于image_holder（图像）的内容位于绝对位置，因此不会添加父级的高度。在这种情况下，您需要手动设置高度，但对于简单的布局，您可能不应该使用position：absolute。

CSS - 相对定位的div重叠

2 个答案: