css - 将一个 Div 放置在另一个 DIV 下方

Question

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

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