Z-Index in combination with position: fixed and transitions (CSS) - css

Question

I'm setting up a new portfolio website and use the Onepage Scroll Plugin by Pete R.
I added a fix navigation bar and now want to have elements inside a slide overlapping this navigation. Here's a code example at codepen:
http://codepen.io/terrorpixel/pen/BNxYxq
HTML
<nav></nav>
<div class="container">
<div>Bring me to the front!</div>
</div>
CSS
nav {
height: 82px;
left: 0;
position: fixed;
top: 0;
-webkit-transition: background 1.15s ease-in-out 0s;
-moz-transition: background 1.15s ease-in-out 0s;
transition: background 1.15s ease-in-out 0s;
width: 100%;
z-index: 2;
background:rgba(0,255,0,.85);
}
.container {
background:blue;
position: relative;
-webkit-transform: translate3d(0px, -1%, 0px);
-moz-transform: translate3d(0px, -1%, 0px);
transform: translate3d(0px, -1%, 0px);
-webkit-transition: all 2s ease 0s;
-moz-transition: all 2ms ease 0s;
transition: all 2ms ease 0s;
height: 5000px;
z-index:1;
width: 70%;
margin: 0 auto;
}
.container div {
padding: 250px 100px;
z-index:10;
position:absolute;
right:0;
top:0;
background:red;
}
I try to get the red box to the front. I think the failure belongs to the fact that I'm using z-index in different stacking contexts. The inside the .container hadn't worked, too.. Is there actually a possibility to realize that :/?

Answer 1

You need to move .container div outside of .container.
When you place a positioned element inside a positioned element, the children start a new stacking order but it starts in context with the parents value. So even if you specify a z-index value of 10000 to a child of a parent with a z-index of 2 its like the child has a z-index of 2.10000.
This example is crude but you get the idea:
nav {
height: 82px;
left: 0;
right: 0;
position: fixed;
top: 0;
-webkit-transition: background 1.15s ease-in-out 0s;
-moz-transition: background 1.15s ease-in-out 0s;
transition: background 1.15s ease-in-out 0s;
z-index: 2;
background: rgba(0, 255, 0, .85);
}
.container {
background: blue;
position: relative;
-webkit-transform: translate3d(0px, -1%, 0px);
-moz-transform: translate3d(0px, -1%, 0px);
transform: translate3d(0px, -1%, 0px);
-webkit-transition: all 2s ease 0s;
-moz-transition: all 2ms ease 0s;
transition: all 2ms ease 0s;
height: 5000px;
z-index: 1;
width: 70%;
margin: 0 auto;
}
.front {
z-index: 3;
position: absolute;
right: 15%; /* half of 30% (the left over of 70% container width) */
top: 82px;
background: red;
}
<nav></nav>
<div class="container">
</div>
<div class="front">Bring me to the front!</div>
</div>