html - 简单的z-index挑战:让一个同胞消失在另一个同胞之后？

这是我想要的样子：



红色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

最佳答案

还感谢：@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>