将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下面

回答

相关问题