Problem with CSS, on position: absolute

Question

Hi,

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><a href="#">Chetwynd</a></li>
                                <li><a href="#">Fort St James</a></li>
                                <li><a href="#">Fort St John</a></li>
                            </ul>
                            <ul class="nm_right">
                            <li><a href="#">McBride</a></li>
                                <li><a href="#">Prince George</a></li>
                                <li><a href="#">Prince Rupert</a></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><a href="#">Chetwynd</a></li>
                            <li><a href="#">Fort St James</a></li>
                            <li><a href="#">Fort St John</a></li>
                        </ul>
                        <ul class="nm_right">
                        <li><a href="#">McBride</a></li>
                            <li><a href="#">Prince George</a></li>
                            <li><a href="#">Prince Rupert</a></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/