CODEWITHSUNDEEP
htmlcss
fightstarr20
fightstarr20

Reputation: 12568

CSS - Relative positioned div overlapping

I have a basic layout with a block of text above and below and image like this..

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

Why does the div below overlap the image? As the images are absolutley positioned inside a relativley positioned div then it wouldn't break layout?

Upvotes: 0

Views: 91

Answers (2)

Adel Elkhodary
Adel Elkhodary

Reputation: 1647

You should define height and / or width for the relative position because once you give an element absolute its getting out of the flow so you have to set the height and width 100% to the absolute then and its looking for a parent that have a height and width to behave in the right way

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

Upvotes: 3

Kamelkent
Kamelkent

Reputation: 329

You need to set a height on "image_holder" since it gets a height of 0px. You can easily see this in Developer Tools in your browser. An element gets its height from its content and since the content of image_holder (the image that is) is positioned absolute it will not add the the height of the parent. You need to set the height manually in this case, but for a simple layout as this you should probably not use position: absolute.

Upvotes: 0

Related Questions