I'm perplexed as to why a div with display:block won't position itself below another div with the same style.
Here's my code:
.container{
display: block;
position: relative;
}
.container img{
width: 100%;
position: absolute;
top:0;
left:0;
}
.container .text-left{
position: absolute;
top:35rem;
left:35rem
}
.container .text-right{
position: absolute;
top:35rem;
right:35rem
}<div class="container" >
<img src="/image1.jpg" alt="">
<div class="text_left">
<h2>HEADING 1</h2>
</div>
</div>
<div class="container" >
<img src="/image2.jpg" alt="">
<div class="text_right">
<h2>HEADING 2</h2>
</div>
</div>I've tried various solutions, like using overflows, but I just can't seem to get the second div with display block to position itself properly below the first.
EDIT: It appears that when using position:absolute elements inside a position:relative element, and that element has a height due to containing an image, the absolute elements remove this height. To fix this, you need to specify the height explicitly.
But why is this happening?
Could it be because of outdated coding practices when using absolute positioning?
Why doesn't the browser take the image height into account by default and only override if necessary?
Can anyone shed some light on this issue for me?
Thanks