Z-index不适用于固定标题和固定的下拉菜单

Question

我试图设计一个固定的下拉菜单，当它被较小的视图端口查看时，幻灯片然后坐在我的网站的固定标题下。我不能正确地理解某些内容，因为尽管正确设置了位置并且在导航栏上使用的是Z-index 较低的，但它仍然无法正常工作。在下拉菜单中，它会在我创建的菜单按钮下滑动，但在标题上方，然后位于标题上方。这里是我的代码：

HTML：

<header> 
    <div id="menu-button" class="up">menu</div> 
    <nav role="primary" class="hide"> 
     <ul> 
      <li><a href="#">foobar</a></li> 
      <li><a href="#">foobar</a></li> 
      <li><a href="#">foobar</a></li> 
      <li><a href="#">foobar</a></li> 
      <li><a href="#">foobar</a></li> 
      <li><a href="#">foobar</a></li> 
     </ul> 
    </nav> 
</header> 

CSS：

* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
} 
header { 
    display: block; 
    float: left; 
    width: 100%; 
    height: 50px; 
    background-color: hsla(0, 0%, 20%, 1); 
    box-shadow: 0px 2px 8px #222; 
    position: fixed; 
    top: 0; 
    z-index: 99; 
} 
#menu-button { 
    display: block; 
    float: left; 
    background-color: hsla(0, 0%, 50%, 1); 
    color: #fff; 
    border: 2px solid #222; 
    border-radius: 6px; 
    padding: .25em .5em; 
    margin-left: 10px; 
    margin-top: 10px; 
    cursor: pointer; 
} 
.up { 
    background-image: linear-gradient(hsla(0, 0%, 100%, .2), hsla(0, 0%, 0%, .2)); 
} 
.down { 
    background-image: linear-gradient(hsla(0, 0%, 0%, .2), hsla(0, 0%, 100%, .2)); 
} 
nav ul { 
    list-style:none; 
    width: 100%; 
    position: fixed; 
    z-index: -1; 
    transition: all .6s ease; 
    -webkit-transition: all .6s ease; 
    -moz-transition: all .6s ease; 
    -o-transition: all .6s ease; 
} 
.hide ul { 
    top: -500px; 
} 
.reveal ul { 
    top: 50px; 
} 
nav ul li a, nav ul li a:visited { 
    display: block; 
    float: left; 
    width: 50%; 
    background-color: hsla(0, 0%, 35%, 1); 
    text-decoration: none; 
    text-align: center; 
    color: #fff; 
    padding: 1em; 
    border-right: 1px solid #fff; 
    border-bottom: 1px solid #fff; 
    transition: .4s all; 
    -webkit-transition: .4s all; 
    -moz-transition: .4s all; 
    -o-transition: .4s all; 
} 
nav ul li:nth-child(even) a { 
    border-right: none; 
} 
nav ul li:hover a { 
    background-color: hsla(0, 0%, 50%, 1); 
} 

的jQuery：

$('#menu-button').click(function() { 
    $(this).toggleClass('down'); 
    $('nav').toggleClass('reveal'); 
}); 

下面是我为它作出的jsfiddle：

http://jsfiddle.net/kyleshevlin/yaJyK/6/

Answer 1

一种方法是添加在菜单按钮的包装：

<div class='menu-wrap'> 
    <div id="menu-button" class="up">menu</div> 
</div> 
<nav role="primary" class="hide"> 
    … 
</nav> 

使菜单包装器菜单栏的全宽/高：

​​

Demo fiddle

Answer 2

删除父（标题）上的z-index并添加一个position：relative。要做到这一点，并让您的固定头的要求

Answer 3

您不能在固定元素（其具有更大的z索引）内部具有菜单（您希望使用较低的z索引）。 你必须这两个分开，使两者的固定和顶部=标题高度（或边距）

把你的内容在下面绝对positionned容器那么无论是标题和菜单将留在你可以独立地设置每个z索引（like this）

header { 
    display: block; 
    width: 100%; 
    height: 50px; 
    background-color: hsla(0, 0%, 20%, 1); 
    box-shadow: 0px 2px 8px #222; 
    position: fixed; 
    top: 0; 
    z-index:1; 
} 
nav{ 
    position:fixed; 
    transition: all .6s ease; 
    -webkit-transition: all .6s ease; 
    -moz-transition: all .6s ease; 
    -o-transition: all .6s ease; 
    width:100%; 
} 

<header> 
    <div id="menu-button" class="up">menu</div> 
</header> 
<nav role="primary" class="hide"> 
    <ul> 
     <li><a href="#">foobar</a></li> 
     ...