Currently in the process of setting up a fresh portfolio website and utilizing the Onepage Scroll Plugin created by Pete R.
Recently, I included a fixed navigation bar and now aiming to have elements within a slide overlapping this navigation. Here's a preview example on 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;
}
The main issue is trying to bring the red box to the forefront. It seems like the problem lies in using z-index within different stacking contexts. The z-index for the div inside the .container did not work either. Is there a way to achieve that effect? :/?