html - 简单的 z-index 挑战 : making a sibling disappear behind another sibling?

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

感谢:@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>