z-index值不適用於元素？

我有一個漢堡包登錄，由另一個div覆蓋。我想要漢堡標誌堆疊在一切之上。所以我將z-index值應用於我認爲合適的地方。但它不起作用。誰能解釋爲什麼？下面是我的codepen，請看看。z-index值不適用於元素？

codepen：

HTML：

<body> 
    <div id="photoCover"> 
     <nav id="menu" class="menu"> 
      <a href="#" class="menu-trigger"><span>Menu</span></a> 
     </nav> 
    </div><!--photoCover--> 
    <div id="entryMenu"></div><!--entryMenu--> 
</body>

CSS：

html { 
    background: green; 
    width: 100%; 
    height:100%; 
} 
body { 
    width: 100%; 
    height:100%; 
    position: relative; 
} 
#photoCover { 
    width:100%; 
    height:100%; 
    position: fixed; 
    top: 0; 
    left:0; 
    background-color: rgba(0,0,0,0.6); 
} 
.menu { 
    position: fixed; 
    top: 0; right: 0; 
    width: 100%; 
    background-color: rgba(0,0,0,0); 
    -webkit-backface-visibility: hidden; 
} 
.menu-trigger { 
    position: fixed; 
    top: 2%; right: 2%; 
    display: block; 
    width: 60px; height: 60px; 
    cursor: pointer; 
    background: red; 
    z-index:3000; 
} 
.menu-trigger span { 
    position: absolute; 
    top: 50%; left: 0; 
    display: block; 
    width: 100%; height: 6px; 
    margin-top: -2px; 
    background-color: #fff; 
    font-size: 0px; 
    -webkit-touch-callout: none; 
    user-select: none; 
    -webkit-transition: background-color 0.3s; 
    transition: background-color 0.3s; 
    z-index: 2000; 
} 
.menu-trigger span:before, 
.menu-trigger span:after { 
    position: absolute; 
    left: 0; 
    width: 100%; height: 100%; 
    background: #fff; 
    content: ''; 
} 
.menu-trigger span:before { 
    -webkit-transform: translateY(-270%); 
    transform: translateY(-270%); 
} 
.menu-trigger span:after { 
    -webkit-transform: translateY(270%); 
    transform: translateY(270%); 
} 
#entryMenu { 
    position: fixed; 
    top:0; 
    left:0; 
    height:100%; 
    width:100%; 
    background-color: rgba(0,0,0,0.9); 
}

來源

2015-09-29 mike beckett

請提供一個有效的例子 –

它看起來像[this]（http://i.imgur.com/78ixOSx.png）對我來說，問題在哪裏？它應該怎麼看？ – mnme

我想要的是一切都是一樣的，但只是漢堡標誌，只是坐在上面。這不可能嗎？ –

通過添加的z-index父-DIV，我拿到「漢堡包「在頂層。

#photoCover { 
    (...) 
    z-index:99; 
}

我會相信，之所以，是，無論是#photoCover和#entryMenu是固定的，在同一個地方，在#entryMenu是放在上面，因爲它是最後加入。

來源

2015-09-29 11:23:03 rblarsen

添加的z-index到包裝DIV

#photoCover { 
    width:100%; 
    height:100%; 
    position: fixed; 
    top: 0; 
    left:0; 
    background-color: rgba(0,0,0,0.6); 
    z-index: 1; 
}

Demo URL

來源

2015-09-29 11:41:06 RAN

添加z-index: 1;爲ID = photoCover格。

來源

2015-09-29 11:45:03

對您的解決方案的解釋會很有幫助。什麼是問題，你是如何解決它的？ – showdev

z-index值不適用於元素？

回答

相關問題