I'm currently working on a design where I have a group of parent containers with the float left property applied. Inside each parent container, there is a child div with position absolute defined within them. Here's an example:
<div class="wrapper">
<div class="pa">
<div id="apDiv1"><img src="images_1/logo-u16785.png" width="194" height="190"></div>
</div>
<div class="pa">
<div id="apDiv4"><img src="images_1/zilogo-u16782.png" width="194" height="190"></div>
</div>
</div>
Here is the corresponding CSS code:
.wrapper {
width:1300px;
position: relative;
}
.pa {
float:left;
width:650px;
position: relative;
}
#apDiv1 {
position: absolute;
width: 650px;
height: 190px;
z-index: 4;
left: 39px;
top: 10px;
}
#apDiv4 {
position: absolute;
width: 650px;
height: 190px;
z-index: 4;
left: 39px;
top: 10px;
}
My issue arises when both selectors have the same top and left values, but they end up overlapping each other instead of being positioned relative to their parent containers as expected. Can anyone shed light on why this might be happening?
Thank you!