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>