为什么z-index不能使用纯css菜单覆盖？

Question

这让我至少有三个小时了。我无法理解。

我有一个css菜单覆盖：

#toggle-nav-label {
    text-align: center;
    display: block;
    cursor: pointer;
    position: relative;
    z-index: 8500; /* to keep hamburger above all */
    width: 30px;
    height: 25px;
    margin-top: 40px;
    background-color: transparent
}
#menu .menu-container {
    position: fixed;
    overflow: hidden;
    z-index: -1; /* minimal z-index here */
    opacity: 0;
    width: 100%;
    height: 101%;
    left: 0px;
    top: 0px;
    background: #e39c37;
    -webkit-transition: all 0.5s ease-in-out; 
    -moz-transition: all 0.5s ease-in-out; 
    -o-transition: all 0.5s ease-in-out; 
    transition: all 0.5s ease-in-out
}
#menu .menu-container .menu-area {
    padding-left: 4%    
}
#menu ul {
    position: absolute;
    top: 40%
}
#menu ul li { 
    margin: 0px 0px 9px 0px
}
#wrapper {
    max-width: 1200px;
    margin: 0;
    padding-top: 100px;
    padding-left: 3%;
    position: relative;
    z-index: 1000 /* more z-index than expanded overlay */
}

和一些HTML

<header id="header">
     <nav id="menu">        
        <input type="checkbox" id="toggle-nav"/>
            <label id="toggle-nav-label" for="toggle-nav">
                    <div id="nav-icon">
                          <span></span>
                          <span></span>
                          <span></span>
                    </div>
             </label>  
            <script>
                $(document).ready(function(){
                  $('#nav-icon').click(function(){
                        $(this).toggleClass('open');
                   });
                });
            </script>
            <div class="menu-container">
                <div class="menu-area">
                    <ul>
                        <li><a href="#">Menu</a></li>
                        <li><a href="#">Menu</a></li>
                        <li><a href="#">Menu</a></li>
                        <li><a href="#">Menu</a></li>
                    </ul>
                </div>
            </div>
   </nav>
</header>
<div id="wrapper">
        Rest of page..
<footer>
</footer>

.menu-container z-index设置为-1，wrapper具有更高的z-index，但就目前而言，我可以点击菜单覆盖{{1}即使菜单折叠，链接？它的不透明度也设为0？

菜单折叠时我无法突出显示文字。这是为什么？

我确实向li添加了visibility: hidden，然后我可以在包装器中选择文本，但是当菜单切换时我没有得到.menu-container效果。

这篇SO文章here警告说，z-index元素需要ease-in-out（一般定位）。我对两者都持有立场。

https://jsfiddle.net/9ohpttL3/1/

Answer 1

如果我了解最终目标，请使用margin-top上的#wrapper代替padding-top，然后您只需要在切换按钮上使用z-index，这样它就会显示在.main-container，然后当您显示菜单时，将z-index添加到header。

$(document).ready(function() {
  $('#nav-icon').on('click', function() {
    var $header = $('#header');
    if ($header.hasClass('open')) {
      $header.removeClass('open').one('transitionend', function() {
        $header.removeClass('front');
      });
    } else {
      $header.addClass('open front');
    }
  });
});

/*Header */

header {
  position: fixed;
  width: 100%;
  height: 80px;
  background-color: rgba(255, 255, 255, 1.00);
  color: #000;
  top: 0;
  padding: 0;
}

.front {
  z-index: 1;
}

.front #menu .menu-container {
height: 101%;
}

header a:link {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  text-decoration: none;
  min-width: 100%;
  color: #000;
}

header a:hover {
  color: #eaab00;
}

#header-area {
  max-width: 1200px;
  padding-left: 3%;
  margin: 0
}

.header-logo {
  font-family: 'Neue Helvetica W01', sans-serif;
  font-size: 15px;
  letter-spacing: 3px;
  margin-top: 35px;
  margin-left: 3px;
  display: inline-block;
  cursor: pointer;
}


/* Nav */

nav {
  float: right;
  margin: 0;
  padding: 0;
  display: inline-block;
}

#toggle-nav-label {
  text-align: center;
  display: block;
  cursor: pointer;
  position: relative;
  z-index: 2;
  width: 30px;
  height: 25px;
  margin-top: 40px;
  background-color: transparent
}

#menu .menu-container {
  position: fixed;
  overflow: hidden;
  opacity: 0;
  width: 100%;
  left: 0px;
  top: 0px;
  background: #e39c37;
  -webkit-transition: opacity 0.5s ease-in-out;
  -moz-transition: opacity 0.5s ease-in-out;
  -o-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
  height: 0;
}

#menu .menu-container .menu-area {
  padding-left: 4%
}

#menu ul {
  position: absolute;
  top: 40%
}

#menu ul li {
  display: block;
  font-size: 50px;
  line-height: 55px;
  font-weight: 600;
  margin: 0px 0px 9px 0px;
}

#menu li a {
  text-decoration: none;
  color: #000;
}

#menu .menu-footer {
  position: absolute;
  bottom: 45px;
  width: 90%;
}

#toggle-nav {
  display: none;
}

#toggle-nav:checked ~ .menu-container {
  opacity: 1;
}

#nav-icon {
  width: 30px;
  height: 25px;
  position: relative;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}

#nav-icon span {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: #000;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

#nav-icon span:nth-child(1) {
  top: 0px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#nav-icon span:nth-child(2) {
  top: 6px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#nav-icon span:nth-child(3) {
  top: 12px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

.open #nav-icon span:nth-child(1) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  top: -6px;
  left: 4px;
  background-color: rgba(255, 255, 255, 1.00)
}

.open #nav-icon span:nth-child(2) {
  width: 0%;
  opacity: 0;
}

.open #nav-icon span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 15px;
  left: 4px;
  background-color: rgba(255, 255, 255, 1.00)
}


/* Wrapper */

#wrapper {
  max-width: 1200px;
  margin: 0;
  margin-top: 100px;
  padding-left: 3%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<header id="header">
  <div id="header-area">
    <nav id="menu">
      <input type="checkbox" id="toggle-nav" />
      <label id="toggle-nav-label" for="toggle-nav">
        <div id="nav-icon">
          <span></span>
          <span></span>
          <span></span>
        </div>
      </label>
      <div class="menu-container">
        <div class="menu-area">
          <ul>
            <li><a href="#">Case Studies</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Journal</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
          <div class="menu-footer">
            Footer
          </div>
        </div>
      </div>
    </nav>
  </div>
</header>
<div id="wrapper">
  <main>


    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis, nunc aliquet vulputate tempus, diam ante semper dui, id porta velit neque quis libero. Sed eget enim vehicula augue aliquam efficitur. Aliquam nec mauris nulla. Nunc viverra velit
    et lectus vulputate blandit. Suspendisse dignissim hendrerit ex sit amet euismod. Morbi nec auctor dui. In sollicitudin sem in dolor tempus, in dictum ligula finibus. Vestibulum auctor turpis quis aliquam consectetur. Donec ullamcorper lacinia odio,
    et sodales odio vestibulum at. Phasellus pharetra metus eget augue tempus, quis vestibulum mauris sollicitudin. Phasellus eget ullamcorper sapien. Sed dolor metus, pellentesque quis metus vel, eleifend tincidunt mauris. Aliquam erat volutpat. Vivamus
    sit amet libero dolor. Mauris sollicitudin lorem vel justo vestibulum fringilla. Donec consequat molestie lobortis. Aliquam id neque vulputate, cursus nunc at, consectetur arcu. Phasellus consequat fermentum purus eget laoreet. Proin pulvinar tellus
    sem, ut porttitor velit molestie nec. Nullam consectetur leo metus, nec consequat nibh auctor sit amet. Sed vel malesuada elit. Praesent consequat est mauris, ac interdum metus posuere et. In dictum volutpat ex sed mattis. Nulla et est vel sem rutrum
    faucibus. Quisque nulla mi, blandit dictum mattis in, semper in diam. Nullam auctor consequat nunc, vitae lobortis justo ullamcorper non. Quisque bibendum metus id elit gravida, at vulputate nibh placerat. Nulla a nulla dignissim, vulputate nunc eu,
    congue ex. Morbi eu diam ultrices, efficitur nisi sit amet, cursus augue. Maecenas pellentesque metus ligula, eu aliquam lorem molestie vel. Ut ac enim et odio lacinia eleifend quis commodo eros. Fusce sed pharetra sem. In blandit, augue et rutrum
    cursus, nulla nibh consequat ligula, elementum rhoncus lectus dui a sapien. In at felis bibendum nulla varius porta. Sed ultrices lacus sapien, in vehicula erat interdum nec. Praesent faucibus rutrum eros quis placerat. Morbi tincidunt justo nec nisl
    mattis, auctor vulputate magna volutpat. Suspendisse potenti. Nulla a accumsan lorem. Maecenas sed elit in orci tempor congue. Morbi ut velit et ante interdum posuere. Nam efficitur pulvinar arcu quis tempus. Pellentesque elementum aliquam erat id
    ultricies. Sed maximus dui elit, at posuere dolor pretium a. Integer tellus massa, accumsan id dapibus vitae, tincidunt id odio. Nam in nunc lectus. Sed magna augue, suscipit eu lectus bibendum, euismod tempor elit. Etiam sit amet viverra sem, ut
    dapibus sem. Duis rutrum est sit amet luctus finibus. Nam velit dolor, pharetra non justo at, lobortis consectetur nisl. Duis ut nunc vitae sem egestas elementum vel a leo. Phasellus convallis fringilla mi, et rhoncus lectus suscipit et. Fusce tincidunt
    leo sed ex feugiat, ut rutrum felis molestie. Duis libero mi, fringilla ut cursus sed, lacinia vitae lorem. Cras cursus euismod enim, ac rhoncus mi dapibus ac. Praesent et suscipit magna, nec eleifend lectus. Sed vitae enim blandit, elementum enim
    eu, hendrerit quam. Nulla sit amet dolor at libero feugiat commodo. Sed eu orci et ante ullamcorper faucibus. Suspendisse tincidunt cursus lacus, non elementum nibh accumsan quis. Etiam ligula velit, aliquet ac lobortis et, efficitur ac dolor. Etiam
    rutrum eget dui ac consequat. Suspendisse consequat placerat odio, in sodales orci facilisis non. Sed tempus leo vitae dui euismod, a consectetur dolor consectetur.
  </main>
  <footer>

  </footer>
</div>