将一个Div定位在另一个Div下方

Question

将一个Div定位在另一个Div下方

8

我有两个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;
}

感谢提前任何帮助。

- fireBand

1

请您选择问题中的“代码”部分，以便更容易阅读。 - Michael

3个回答

2

好的，根据您更新后的问题，我认为以下内容是您所需要的：

好的，根据您更新后的问题，我相信我已经创建了您需要的内容，具体如下：

<!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下面的根本问题，但希望它能解决您的具体问题。

- Brian Hasden

0

我猜测一下，你是否尝试在第二个div中添加样式clear:both？我怀疑它可能没有帮助，但也许可以试试。

你还可以尝试为第二个div添加一个与第一个div高度相等的顶部边距。基本上，像这样：

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

这里的40px是第一个div的高度。问题在于，你需要知道第一个div的高度，如果它是可变的，那么这种方法就不起作用了。

- Brian Hasden

谢谢回复，但是它并没有起作用。第二个div出现在更下面，但是在第一个div的顶部，而且第一个div也随着它一起移动到底部。 - fireBand

你尝试过将顶部填充增加到40像素吗？另外，请确保顶部填充在第二个div上而不是包装器/主div上。 - Brian Hasden

我将两个解决方案结合起来，但仍然只有“wrapper-div”的一半可见。不过我找到了问题所在。 "wrapper" div确实会扩展，但是会越过“main-div”的边界向上扩展。我认为由于位置是绝对的，它独立于“main-div”的位置。由于“main-div”没有相应地扩展，因此只有“wrapper” div的一半可见。我已经用新元素编辑了我的帖子。 - fireBand

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Michael · Accepted Answer

我认为解决方案包括以下步骤。首先，需要一个包装 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>

然后你可以根据需要显示/隐藏，并正确定位内部内容。