Problem with CSS, on position: absolute - html

Question

I don't know what kind of position shall I announce if the parent has a position: absolute.
Here's the code,
<div id="new_map">
<div id="map_nbc_pop">
<div class="nm_bubbletop1"></div>
<div id="nm_bubblebg">
<ul class="nm_left">
<li>Chetwynd</li>
<li>Fort St James</li>
<li>Fort St John</li>
</ul>
<ul class="nm_right">
<li>McBride</li>
<li>Prince George</li>
<li>Prince Rupert</li>
</ul>
</div>
<div class="nm_bubblebelow1"></div>
</div>
</div>
here's the sample CSS, I just remove the other for viewing...
#new_map { position: static }
#map_nbc_pop { position: absolute }
The problem for me is in .nm_bubbletop1, #nm_bubblebg, .nm_bubblebelow1
What position shall I use? Because they are not properly layered on the browser.
<div class="nm_bubblebelow1"></div>
<div class="nm_bubbletop1"></div>
<div id="nm_bubblebg"></div>
What I want is this,
<div class="nm_bubbletop1"></div>
<div id="nm_bubblebg"></div>
<div class="nm_bubblebelow1"></div>
Thank you!

Answer 1

If you need to change how the <div>'s appear without changing the code, position: absolute is your best option:
.nm_bubbletop1, #nm_bubblebg, .nm_bubblebelow1 [
position: absolute;
left: 0;
}
.nm_bubbletop1 {
top: 0;
}
#nm_bubblebg {
top: 100px; /* this is .nm_bubbletop1's height */
}
.nm_bubblebelow1 {
top: 200px; /* this is .nm_bubbletop1's height + #nm_bubblebg's height */
}
That being said, it's hacky. If there's anyway you can just order them the way you want in the HTML, it'll make your life easier.

Answer 2

if you give #new_map a position of relative and then the children you want to arrange a position of absolute this will make the position of those children relative to the parent #new_map ie your origin for coordinates will be the top left corner of #new_map. You can then change the stacking order (z-index) or positioning (top, left, right, bottom) of the children as you like based on where #new_map is.

Answer 3

This is what you mean i think >
<div id="new_map">
<div id="map_nbc_pop">
<div class="nm_bubbletop1"></div>
<div id="nm_bubblebg">
<ul class="nm_left" >
<li>Chetwynd</li>
<li>Fort St James</li>
<li>Fort St John</li>
</ul>
<ul class="nm_right">
<li>McBride</li>
<li>Prince George</li>
<li>Prince Rupert</li>
</ul>
</div>
<div class="nm_bubblebelow1"></div>
</div>
​
And css:
#new_map { position: static }
#map_nbc_pop { position: absolute }
.nm_bubbletop1, .nm_bubblebelow1 { position:absolute; height:15px; background-color:#ccc; width:100%; }
.nm_bubbletop1 { top:0px; }
.nm_bubblebelow1 { bottom:0px; }
#nm_bubblebg { margin:15px 0px; }
​This makes the menu flexible, and the top and bottom are always in place. The margin of the middle makes it seamlessly connect.
The fiddle: http://jsfiddle.net/fmDhn/1/