Z-指数与组合的位置是：固定和过渡（CSS）

Question

我设立一个新的投资组合的网站，并使用Onepage Scroll Plugin by Pete R.

我增加了一个固定的导航栏，现在希望有重叠的幻灯片中的元素这个导航。下面是一个代码示例在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; 
} 

我试图让红色框前面。我认为失败属于我在不同的堆叠环境中使用z-index的事实。 .container里面也没有工作..实际上是否有可能实现：/？

Answer 1

您需要将.container div移至.container之外。 将定位元素放置在定位元素中时，子元素将开始一个新的叠加顺序，但是它将以父项值的上下文开始。所以，即使你指定一个z-index值为10000的z-index为2的父节点，它的子节点的索引就是2.10000。

这个例子是原油，但你的想法：

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>