問題絕對定位的div嵌套在另一個絕對定位的div

我不是CSS專家，特別是當它定位時，我希望這個問題很容易解決。問題絕對定位的div嵌套在另一個絕對定位的div

這裏是我的簡單的HTML：

<body> 
    <div style="height:100%;width:100%;"> 
     <div id="map" style="bottom:250px;height:100%;overflow:hidden;position:absolute;width:100%;"> 
      <!-- The controls div does not render correctly. --> 
      <div id="controls" style="left:10px;position:absolute;top:10px;"> 
      </div> 
      <!-- The legend and logos divs do render correctly. --> 
      <div id="legend" style="bottom:45px;left:10px;position:absolute;"> 
      </div> 
      <div id="logos" style="bottom:5px;left:10px;position:absolute;"> 
      </div> 
     </div> 
     <div id="search" style="bottom:0;height:250px;position:absolute;width:100%;"> 
     </div> 
    </div> 
</body>

的「控制」的div不正常呈現。實際上，它根本不顯示。如果我拿出「top：10px」;樣式，並將其替換爲「bottom：400px」，它確實呈現正確。但這並不是我想要的，因爲如果用戶調整瀏覽器窗口的大小，「地圖」div的高度就會被調整。我也不想用JavaScript來定位div。

「legend」和「logos」div都正確渲染。

我正在Firefox中測試。

來源

2010-12-10 Nate Irwin

這裏是我結束了。謝謝，Sarfraz和sholsinger，領導我朝着正確的方向：

<body> 
    <div style="height:100%;width:100%;"> 
     <div style="bottom:250px;position:absolute;top:0;width:100%">    
      <div id="map" style="height:100%;overflow:hidden;position:relative;width:100%;"> 
       <div id="controls" style="left:10px;position:absolute;top:10px;"> 
       </div> 
       <div id="legend" style="bottom:45px;left:10px;position:absolute;"> 
       </div> 
       <div id="logos" style="bottom:5px;left:10px;position:absolute;"> 
       </div> 
      </div> 
     </div> 
     <div id="search" style="bottom:0;height:250px;position:absolute;width:100%;"> 
     </div> 
    </div> 
</body>

所以我基本上只是嵌套在「地圖」格在絕對定位的div並將其設置爲「位置;相對的;」。

有在我第一次張貼的例子兩個問題：

正如sholsinger指出的那樣，我的「地圖」分區設置爲100％，這是大小的div來100％的高度的瀏覽器窗口。「底部：250px;」只是簡單地把那個div推上去掉。這導致控件渲染屏幕。我可以簡單地在「控件」（「margin-top：260px;」）上設置一個新樣式以使顯示正常工作，但這不會正確解決底層問題。
正如Sarfraz指出的那樣，「地圖」div需要有「位置：相對的」。在其上定義，所以絕對定位的控件將正確顯示。

上述修復解決了這兩個問題。

來源

2010-12-10 19:24:58

您應該簡單地給父母的div設置爲relative和孩子absolute的位置。這個CSS技巧在這裏解釋：

Absolute Positioning Inside Relative Positioning

來源

2010-12-10 17:24:48 Sarfraz

對，但如果我將「地圖」設置爲「位置：相對;」它無法正確呈現。 – 2010-12-10 17:34:26

同意。 '＃controls' div可能正在渲染，但是你在父級上有'overflow：hidden'，所以它被繪製在父級之外，因此不會被顯示。另外，如果父分區'＃map'將頁面頂部的「250px」擴展（如果您的CSS正在呈現正確的話，應該是這樣），那麼控件將不在屏幕上。 – sholsinger 2010-12-10 17:35:20

@Nate：如果你刪除'bottom：250px'，然後在'div＃map'上改變'position：relative'，那麼內部div應該在你想要的位置。 – sholsinger 2010-12-10 17:36:41

問題絕對定位的div嵌套在另一個絕對定位的div

回答

相關問題