將Div出現在另一個DIV下面

我有兩個DIV元素，其中一個具有絕對位置（主DIV的左下角）。第二個DIV是隱藏的，只有通過點擊鏈接才能顯示。將Div出現在另一個DIV下面

我需要第二個出現在第一個下面。但是由於第一個div的位置是絕對的，第二個位置是第一個div的位置。

HTML代碼：

<div class ="main-div"> 
     <div class = "wrapper"> 
     <div class ="first-div"> 
     <a href ="blah"> <span>my link</span> </a> 
     //this is absolute positioned 
     </div> 
    <div class ="second-div"> 
     //this only appears after clicking on a link 
     <form> 
      <textarea> 
      </textarea> 
     </form> 
    </div> 
    </div> 
</div>

CSS：

div.wrapper { 
    width:inherit; 
    float:left; 
    bottom:6px; 
    position:absolute; 
    padding: 0 0 0 0; 
    overflow: auto; 
    } 

    div.second-div { 
     padding-top: 2px 
    } 

    div.main-div{ 
     background:{colour} url({image}) no-repeat 0 100%; 
    width:557px; 
    padding:8px 13px 4px 13px; 
    min-height:61px; 
    position:relative; 
}

預先感謝任何幫助。

來源

2009-12-15 fireBand

您可以請您選擇您的問題的「代碼」部分，以便它更容易閱讀？ – Michael 2009-12-15 18:13:17

我認爲解決方案需要執行以下操作。有一個包裝div：

<div id="my_wrapper"> 
    content 
</div>

有這個div絕對定位。然後在這個div裏面有兩個div，你可見的div，以及需要「變得」可見的div。

<div id="my_wrapper"> 
    <div id="visible_item">Item</div> 
    <div id="may_become_visible">Not Visible Now Item</div> 
</div>

然後，您可以根據需要顯示/隱藏並正確定位內部內容。

來源

2009-12-15 18:12:13 Michael

這是一個好主意。我建議他先嚐試一下。 – 2009-12-15 18:17:35

我試過這個解決方案，但力克解決。「包裝」div需要擴展包含表單元素的不可見div。但由於其絕對位置，表格內的textarea向上擴展，只有一半可見。我需要定位主div的左下角的第一個div（當第二個div被隱藏時），第二個div應該出現在第一個div的底部。這是否具有相對定位？ – fireBand 2009-12-15 21:14:57

不要爲外部div設置特定高度，只需根據每個內容的需要調整高度即可。 – Michael 2009-12-16 01:53:12

只是一個猜測，但你有沒有嘗試添加樣式清晰：都到第二個div？我懷疑它會有幫助，但它可能會。

您也可以嘗試爲等於第一個div的高度的第二個div添加頂部邊距。基本上，如下所示：

<div id="second-div" style="padding-top: 40px">

其中40px是第一個div的高度。問題是你需要知道第一個div的高度是多少，如果它是可變的，那麼這種方法將無濟於事。

來源

2009-12-15 18:03:47

感謝您的回覆，但它沒有工作。第二個div進一步下降，但在第一個div的頂部也隨着它移動到底部。 – fireBand 2009-12-15 21:17:10

你是否嘗試增加從40px的頂部填充。另外，確保頂部填充位於第二個div上，而不是在包裝器/主div上。 – 2009-12-15 21:30:12

我組合了兩個解決方案，但仍然只有「包裝器」的一半是可見的。但我發現了這個問題。「包裝」div的確擴大了，但是越過了「main-div」的邊界。我認爲既然立場是絕對的，它就會獨立於「主格」的立場行事。由於「main-div」沒有相應擴展，所以只能看到「wrapper」div的一半。我編輯了我的文章與新的元素。 – fireBand 2009-12-15 22:39:28

好吧，你更新的問題，我相信我已經創建了您要與以下尋找什麼：在底部

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<body> 
    <style> 
     HTML 
     { 
      margin: 0px; 
      padding: 0px; 
      height: 100%; 
     } 

     BODY 
     { 
      margin: 0px; 
      padding: 0px; 
      height: 100%; 
     } 

     div.first-div 
     { 
      width: inherit; 
      float: left; 
      bottom: 60px; 
      position: absolute; 
      padding: 0 0 0 0; 
      overflow: auto; 
     } 

     div.second-div 
     { 
      display: none; 
      position: absolute; 
      float: left; 
      bottom: 0px; 
     } 
     div.main-div 
     {  
      background:{colour} url({image}) no-repeat 0 100%; 
      width:557px; 
      min-height:61px; 
      position:relative; 
      float: left; 
      height: 100%; 
     } 
    </style> 
    <div class="main-div"> 
     <div id="firDiv" class="first-div"> 
      <a href="#" onClick="document.getElementById('secDiv').style.display='block';"><span>my link</span></a> 
      //this is absolute positioned 
     </div> 
     <div id="secDiv" class="second-div"> 
      //this only appears after clicking on a link 
      <form> 
       <textarea></textarea> 
      </form> 
     </div> 
     this is my content 
    </div> 
</body> 
</html>

現在，這樣做是絕對位置第一和第二的div的位置，以便它們不會相互重疊。如果你不喜歡的事實，第一個div達從頁面的底部如此之高，你可以修改第一DIV風格爲這樣：

div.first-div 
{ 
    width: inherit; 
    float: left; 
    bottom: 20px; 
    position: absolute; 
    padding: 0 0 0 0; 
    overflow: auto; 
}

，然後更新鏈接

<a href="#" onClick="document.getElementById('secDiv').style.display='block';document.getElementById('firDiv').style.bottom='60px';"><span>my link</span></a>

基本上，你正在做的是改變第一個div接近頁面底部，但是當點擊鏈接時移動它，這樣第二個div就有更多空間。

它並沒有解決在絕對定位div下顯示相對定位div的根本問題，但希望能解決您的具體問題。

來源

2009-12-15 23:31:13

將Div出現在另一個DIV下面

回答

相關問題