javascript - 将新的 div 向下滑动到另一个 div 下面

Question

我想让一个新的/隐藏的 div 从另一个 div 下面滑下来。我的想法是我有一个输入字段和一个添加按钮。单击添加按钮时，会显示更多表单元素(从下方滑出)。这个的形式部分对我的问题并不重要，所以我只让第一个 div 成为文本“悬停我以显示新的 div”，新的向下滑动的 div 是一些随机文本。

到目前为止我有这个 html:

<div class="one">Hover me to reveal new div</div>
<div class="two">I slid!<br>And I am higher than the div before me...</div>    

还有这个 CSS:

.one {
    position: relative;
    top: 100px;
    background-color: lightblue;
    z-index: 1;
}

.two {
    position: absolute;
    top: 60px;
    background-color: yellow;
    z-index: -1;
    -webkit-transition: top 1s;
    -moz-transition: top 1s;
    -o-transition: top 1s;
    transition: top 1s;
    }

.one:hover + .two {
    top: 100px;
}

参见 jsfiddle:http://jsfiddle.net/8ZFMJ/

这类作品。但是第二个 div 高于第一个 div，所以它在第一个 div 上方可见，我不希望这样。我怎样才能让它按照我想要的方式滑下第一个 div？如果我在这个过程中最终没有第一个 div 必须知道第一个 div 的位置，那也很好......

Answer 1

将两个 div 放在一个容器中(两个 div 的高度相加。)，并将您的 div 放在容器的最顶部。然后将容器设置为overflow:hidden;

是这样的: http://jsfiddle.net/8ZFMJ/2/

问候