I'm facing a challenge with structuring a new widget I'm developing. My goal is to incorporate a geographic map with hotspots without resorting to image maps.
Here's the incomplete solution I've come up with so far:
http://jsfiddle.net/nielsbuus/FZJ8E/1/
HTML:
<div class="parent">
<!-- I serve as a container and need to expand in height along with my children to prevent overlapping of elements below me, similar to clearing floats -->
<div class="lower">
<!-- I contain an image with fixed width but variable height -->
<img src="http://placekitten.com/300/325" />
</div>
<div class="higher-container">
<div style="top: 20px; left: 30px" class="higher-spot">foo</div>
<div style="top: 80px; left: 50px" class="higher-spot">bar</div>
<div style="top: 85px; left: 70px" class="higher-spot">baz</div>
</div>
</div>
<div class="successor">
Please make sure to keep me positioned below all of this.
</div>
CSS:
.parent {
background-color: #ccffff;
padding: 20px;
position: relative;
}
.lower {
position: absolute;
width: 300px;
background-color: rgba(0,0,0,0.2);
z-index: 0;
}
.higher-container {
position: absolute;
background-color: rgba(255,0,0, 0.3);
}
.higher-spot {
position: absolute;
width: 25px;
height: 25px;
background-color: rgba(0, 255, 0, 0.5);
z-index: 1px;
}
.successor {
font-size: 18px;
font-family: sans-serif;
}
The main issue here lies in using absolutely positioned z-indexed divs. They cause detachment from the layout, preventing the parent container from expanding and placing subsequent elements beneath the absolutely positioned ones.
I am seeking suggestions on how to stack two divs (lower and higher-container) together while ensuring that the parent container expands according to the size of the lower div.