将Div放置在另一个DIV下方 [英] Position a Div to appear below another DIV

问题描述

Ive有两个DIV元素，其中一个具有绝对位置（主DIV的左下角）。第二个DIV是隐藏的，只有通过点击链接显示。

Ive got two DIV elements one of which has absolute position (lower left corner of main DIV). The second DIV is hidden and only displayed by clicking on a link.

我需要第二个出现在第一个之下。

I need the second one to appear just below the first one. But since the first div's position is absolute the second one appearing on top of first one.

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;
}

感谢您提供任何帮助。

推荐答案

我认为解决方案需要做以下事情。有一个封装div：

I think the solution entails doing the following. Have a wrapper div:

<div id="my_wrapper">
  content
</div>

有这个div绝对定位。然后在这个div里面有两个div，你可见的div，和一个需要变得可见。

Have this div absolutely positioned. Then inside of this div have two divs, your visible div, and the one that needs to "become" visible.

<div id="my_wrapper">
  <div id="visible_item">Item</div>
  <div id="may_become_visible">Not Visible Now Item</div>
</div>

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

Then you can show/hide as necessary and position the inside content correctly.

这篇关于将Div放置在另一个DIV下方的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！