Question

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

提前感谢您的帮助。

Answer 1

我认为解决方案需要执行以下操作。有一个包装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>

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

Answer 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从页面底部向上这么高的事实，您可以修改first-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的根本问题，但希望能解决您的具体问题。

Answer 3

只是一个猜测，但你是否尝试过将风格添加到第二个div？我怀疑它会有所帮助，但它可能会有所帮助。

您还可以尝试为第二个div添加一个上边距，该边距等于第一个div的高度。基本上，像：

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

其中40px是第一个div的高度。问题在于你需要知道第一个div的高度是多少，如果它是可变的，那么这种方法无济于事。

将Div放置在另一个DIV下方

3 个答案: