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

i'm setting new portfolio website , use onepage scroll plugin pete r.

i added fix navigation bar , want have elements inside slide overlapping navigation. here's code example @ codepen:

http://codepen.io/terrorpixel/pen/bnxyxq

html

<nav></nav> <div class="container">   <div>bring me 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: 2s ease 0s;     -moz-transition: 2ms ease 0s;     transition: 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 red box front. think failure belongs fact i'm using z-index in different stacking contexts. inside .container hadn't worked, too.. there possibility realize :/?

you need move .container div outside of .container. when place positioned element inside positioned element, children start new stacking order starts in context parents value. if specify z-index value of 10000 child of parent z-index of 2 child has z-index of 2.10000.

this example crude 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: 2s ease 0s;    -moz-transition: 2ms ease 0s;    transition: 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 on of 70% container width) */    top: 82px;    background: red;  }

<nav></nav>  <div class="container">  </div>  <div class="front">bring me front!</div>  </div>