在另一个div下面滑下新的div [英] Sliding down new div below another div

问题描述

我希望从另一个div下方有一个新的/隐藏的div滑动。我的想法是我有一个输入字段和一个添加按钮。单击添加按钮时，将显示更多表单元素（向下滑出）。这部分形式对我的问题并不重要，所以我让第一个div为文本hover me to reveal new div，新的slide-down-div是一些随机文本。

I want to have a new/hidden div slide down from below another div. The idea is that I have a input field and a add-button. When the add-button is clicked, more form elements are revealed (slide out below). The form-part of this is not important for my problem, so I just let the first div be the text "hover me to reveal new div" and the new sliding-down-div be some random text.

到目前为止我有这个html：

So far I have this 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/

See jsfiddle: http://jsfiddle.net/8ZFMJ/

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

This kind of works. But the second div is higher than the first div, so it is visible above the first div, I do not want that. How can I make it slide down the first div in the way that I want? If I in the process end up not having the first div to have to know the position of the first div, that would be good too...

推荐答案

将两个div放在一个容器中（两个div的高度组合在一起。），并将你的div放在容器的最顶层。
然后将容器设置为 overflow：hidden;

Put the two divs in a container (With the height of the two divs combined.), and put your divs to be at the very top of the container. Then set the container to overflow:hidden;

这样的事情：
< a href =http://jsfiddle.net/8ZFMJ/2/ =nofollow> http://jsfiddle.net/8ZFMJ/2/

问候

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