轻松的z-index挑战：让兄弟姐妹在另一个兄弟姐妹身后消失？

Question

这就是我想要的样子：

红色div内的所有东西都必须落在绿色div之后。 html：

<div style="height: 100px">some text blablablablablablabla
    <br/>some text blablablablablablabla
    <br/>some text
    <br/>some text
    <br/>some text
    <br/>some text
    <br/>some text
    <br/>
</div>
<nav class="navigation">
    <div class="navfake"></div>
    <div class="singleelement">
        <div class="container">
            <div class="title">Some Title1</div>
            <div class="titlepicture">some picture</div>
        </div>
    </div>
    <div class="singleelement">
        <div class="container">
            <div class="title">Some Title2</div>
            <div class="titlepicture">some picture</div>
        </div>
    </div>
</nav>

到目前为止CSS并且遗憾地无法工作：

nav {
    width: 100%;
    height: 60px;
    position: relative;
}
.navfake {
    width: 100%;
    height: 100%;
    background: green;
    z-index: 10;
}
.singleelement {
    display: inline-block;
    width: 100px;
    height: 60px;
    text-align: center;
    z-index: 0;
}
.container {
    position: absolute;
    top: 0px;
     -webkit-transition: all .8s ease;
        -moz-transition: all .8s ease;
        -ms-transition: all .8s ease;
        -o-transition: all .8s ease;
        transition: all .8s ease;
    height: 200px;
}
.titlepicture {
    width: 100%;
    height: 200px;
    background-color: red;

}


.singleelement:hover .container {
    top: -80px;

}

enter link description here

Answer 1

http://jsfiddle.net/hL5gW/4/

添加绝对位置并进行一些定位非常简单。

我将这些样式添加到第二个元素。您只需将其添加到第二个元素的单独类中，或者只是将其添加到singleelement，如果您希望将其应用于这两个元素。

 <div class="singleelement" style="z-index:-100;position:absolute;margin-top:-60px;">

Answer 2

还有以下信用：@Toskan，谢谢

DEMO WORKING

这里是新的css

 nav {
    width: 100%;
    height: 60px;
    position: relative;
}
.navfake {
    width: 100%;
    height: 100%;
    background: green;
    z-index: 10;
    position:relative;
}
.singleelement {
    display: inline-block;
    width: 100px;
    height: 60px;
    text-align: center;
}
.container {
    position: absolute;
    top: 0px;
     -webkit-transition: all .8s ease;
        -moz-transition: all .8s ease;
        -ms-transition: all .8s ease;
        -o-transition: all .8s ease;
        transition: all .8s ease;
    height: 200px;
}
.titlepicture {
    position:absolute;         /*THIS ADDED*/
    width: 100%;
    height: 200px;
    background-color: red;
    z-index:1;            /*THIS ADDED*/
}


.singleelement:hover .container {
    top: -80px;

}

.title{                         /*THIS ADDED*/
    z-index:555; 
    position:relative;

}

HTML：

<br><br>
<div style="height: 100px">some text blablablablablablabla
    <br/>some text blablablablablablabla
    <br/>some text
    <br/>some text
    <br/>some text
    <br/>some text
    <br/>some text
    <br/>
</div>
<nav class="navigation">
    <div class="navfake"></div>
    <div class="singleelement">
        <div class="container">
            <div class="title">Some Title1</div>
            <div class="titlepicture">some picture</div>
        </div>
    </div>
    <div class="singleelement">
        <div class="container">
            <div class="title">Some Title2</div>
            <div class="titlepicture">some picture</div>
        </div>
    </div>
</nav>