Easy z-index challenge: making a sibling disappear behind another sibling? - html

Question

This is what I want it to look like:
everything that is inside the red div, must go behind the green div.
The 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>
The CSS so far and sadly not working:
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

Credits also for: #Toskan, thank you
DEMO WORKING
Here's the new 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>

Answer 2

http://jsfiddle.net/hL5gW/4/
Adding position absolute and doing some positioning this is incredibly simple.
I added these styles to the second element. You'll just have to add it to a seperate class for the second element, or just add it to singleelement if you want this to apply to both.
<div class="singleelement" style="z-index:-100;position:absolute;margin-top:-60px;">