Проблема с CSS, на позиции: абсолютная

Question

Я не знаю, какую должность я должен объявить, если у родителя есть позиция: абсолютная.

Вот код,

<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> 

вот образец CSS, я просто удалить другой для просмотра ...

#new_map { position: static } 
#map_nbc_pop { position: absolute } 

Проблема для меня в .nm_bubbletop1, #nm_bubblebg,. nm_bubblebelow1 Какую позицию я должен использовать? Потому что они неправильно размещены в браузере.

<div class="nm_bubblebelow1"></div> 
<div class="nm_bubbletop1"></div> 
<div id="nm_bubblebg"></div> 

То, что я хочу это,

<div class="nm_bubbletop1"></div> 
<div id="nm_bubblebg"></div> 
<div class="nm_bubblebelow1"></div> 

Спасибо!

Answer 1

Если вам необходимо изменить то, как появляются <div> «s без изменения кода, положение: абсолютное это лучший выбор:

.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 */  
} 

Это, как говорится, это Hacky. Если есть так или иначе, вы можете просто заказать их так, как вы хотите в HTML, это упростит вашу жизнь.

Answer 2

если вы даете #new_map позиции relative, а затем дети, которые вы хотите устроить позицию абсолютного это сделает положение этих детей по отношению к родителю #new_map т.е. вашему источник для координат будет верхним левым углом #new_map , Затем вы можете изменить порядок укладки (z-index) или позиционирование (сверху, влево, вправо, снизу) детей, как вам нравится, на основе того, где находится #new_map.

Answer 3

Это то, что вы имеете в виду я думаю>

<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> 

И 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; } 

Это делает меню гибким, а верх и низ всегда на месте , Граница середины позволяет легко подключиться.

скрипку: http://jsfiddle.net/fmDhn/1/