html - Z索引值对元素不起作用？

我有一个有汉堡标志的div，另一个div覆盖了。我希望汉堡标志堆放在一切之上。因此，我将z-index值应用于我认为合适的位置。但是，它不起作用。谁能解释为什么？这是我的codepen，请看下面。

Codepen：

http://codepen.io/tbeckett24/pen/qORBbE

的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);
}

最佳答案

通过向父级div添加一个z索引，我在顶层获得了“汉堡包”。

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

我相信原因在于#photoCover和#entryMenu都是固定的，并且#entryMenu在同一位置，因为它是最后添加的。

关于html - Z索引值对元素不起作用？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32842526/

CodePen

html - Z索引值对元素不起作用？