I am experiencing an issue with a container div that contains 5 absolutely positioned images. When I specify the last image as absolutely positioned, all other images lose their positioning and stack at the top.
The container itself is relatively positioned
.responsive-container{
position: relative;
}
Inside the container are the following images:
<img src="img/responsive-mac.png" id="res-mac">
<img src="img/responsive-laptop.png" id="res-lap">
<img src="img/responsive-tab.png" id="res-tab">
<img src="img/responsive-phone-portrait.png" id="res-ph-1">
<img src="img/responsive-phone-landscape.png" id="res-ph-2">
Here is the CSS applied to these elements:
.responsive-container{
position: relative;
}
#res-mac{
position: absolute; width: 97%; top: 0%;
}
#res-lap{
position: absolute; width: 85%; top: 232%; left: 30%;
}
#res-tab{
position: absolute; width: 35%; top: 414%; left: 7%;
}
#res-ph-1{
position: absolute; width: 20%; top: 573%; left: 36%;
}
#res-ph-2{
position: absolute; width: 25%; top: 26%; left: 28%;
}
In the demo provided, you can remove the position: absolute; from the 5th image and see that the others start working correctly. It seems to be a cascading issue affecting all images when the positioning of the last one is changed.
I have attempted troubleshooting by removing all additional CSS and JavaScript, but the problem persists. Any insights on what might be causing this?