将Div放置在另一个DIV下方

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>

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