問題與CSS，在位置上：絕對

我不知道如果父母有一個位置：絕對，我應該宣佈什麼樣的位置。問題與CSS，在位置上：絕對

下面的代碼，

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

謝謝！

來源

2010-08-05 Ryan

那麼，你現在要移動是相對的div的？你不能更改代碼？ – 2010-08-05 03:23:50

目前還沒有位置，我說的是3個div。這是我的問題。我應該使用3個div的位置？ – Ryan 2010-08-05 03:36:52

如果您需要更改<div>的顯示方式不改變代碼，位置：絕對是最好的選擇：

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

話雖這麼說，這是哈克。如果無論如何，您可以按照您想要的方式在HTML中訂購它，它會讓您的生活更輕鬆。如果你給#new_map的relative要排列的絕對這一位置將使得這些兒童的位置相對於父#new_map即你的原點座標將是#new_map左上角孩子的位置，然後

來源

2010-08-05 03:46:51 Pat

。然後，您可以根據#new_map的位置更改子項的堆疊順序（z-index）或定位（頂部，左側，右側，底部）。

來源

2010-08-05 05:30:18 prodigitalson

這就是你的意思，我覺得>

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

來源

2010-08-06 13:36:02 no1cobla

問題與CSS，在位置上：絕對

回答

相關問題