正文内容涵盖导航栏下拉

Question

我正在创建一个响应式网站，以便当该网站用作移动设备时，他们可以选中将显示导航栏下拉菜单的框。这目前正在工作，除非单击该框时下拉导航栏位于我的横幅内容后面。有人知道为什么吗？目前非常卡住。

HTML 代码：

  <div class = "wrapper">

  <header>
  <div class = "header">
  <h2 class = "logo">Haukai Restaurant</h2>
  <input type = "checkbox" id = "chk">
  <label for = "chk" class = "show-menu-btn">
    <i class = "fas fa-ellipsis-h"></i>
  </label>

<ul class = "menu-nav">
  <a href="home.html">Home</a>
  <a href="menu.html">Menu</a>
  <a href="reservations.html">Reservations</a>
  <a href="hours.html">Hours</a>
  <a href="contact.html">Contact</a>
  <label for = "chk" class = "hide-menu-btn">
    <i class = "fas fa-times"></i>
  </label>

</ul>

   <section class="banner">
    <div class="img-container">
      <div class="inner-container"> 
        <h1>Haukai Restaurant</h1>
        <h2>Bringing Maori culture and kai to you</h2>
        <a class="btn" href="menu.html">Menu</a>
        <a class="btn" href="reservations.html">Reservations</a>
        <a class="btn" href="privacy.html">Privacy</a>
        <div class = "about-us">
          <br> <br> <br> <br> <br>
          <div class = "about-us-content">
          <h2>About us</h2>
        <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. 
        </p>
        </div>
      </div>
        
      </div>
    </div>
     
   </section>
   </div>
   </body>

CSS 代码：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
  }

 /* Home Page */

 body {
  background: #000;
  min-height: 200vh;
  position: relative;
  }

 .wrapper {
  width: 100%;
  }

  /* Header */

  .header {
   height: 100px;
   background: #000;
   padding: 0 20px;
   color: #fff;
    }

  .logo {
   line-height: 100px;
   float: left;
   text-transform: uppercase;
   }

  .menu-nav {
  float: right;
   line-height: 100px;
   }

  .menu-nav a {
   color: #fff;
   text-transform: uppercase;
    text-decoration: none;
    padding: 0 10px;
   transition: 0.4s;
   }

  .show-menu-btn,
  .hide-menu-btn {
   transition: 0.4s;
   font-size: 30px;
   cursor: pointer;
   display: none;
  }

   .show-menu-btn {
    float: right;
  }

  .show-menu-btn i {
   line-height: 100px;
  }

  .menu a:hover,
  .show-menu-btn:hover,
  .hide-menu-btn:hover {
    color: #feca1d;
  }

  #chk {
    position: absolute;
   visibility: hidden;
    z-index: -1111;
  }

  .menu-content {
   padding: 0 20px;
  }

  .banner {
  position: relative;
  width: 100%;
  height: 100vh;
  background: url(insiderest.jpg);
  background-size: cover;
  }


 @media screen and (max-width: 600px) {
 .show-menu-btn,
 .hide-menu-btn {
  display: block;
}

 .menu-nav {
 position: fixed;
 width: 100%;
 height: 100vh;
 background: #333;
 right: -100%;
 top: 0;
 text-align: center;
 padding: 80px 0;
 line-height: normal;
 transition: 0.7s;
  }

 .menu-nav a {
   display: block;
   padding: 20px;
  }

  .hide-menu-btn {
   position: absolute;
   top: 40px;
   right: 40px;
   }

  #chk:checked ~ .menu-nav {
  right: 0;
  }
}

Answer 1

您使用媒体查询。您在查询上方有一个.menu-nav，在媒体查询内部有一个@media screen and (max-width: 600px) {

z-indexes 仅在位置是固定的、相对的、绝对的、粘性的等时才计算在内。第一个 css 类将关闭 z-index，因为它没有 position 属性。 Replacing the float with position relative 可以工作。

.menu-nav {
   float: right;
   line-height: 100px;
}

或者，也可以将 z-index 添加到媒体查询 .menu-nav 类中。

@media screen and (max-width: 600px) {
     .menu-nav {
       position: fixed;
       z-index:2;
       width: 100%;
       height: 100vh;
       background: #333;
       right: -100%;
       top: 0;
       text-align: center;
       padding: 80px 0;
       line-height: normal;
       transition: 0.7s;
     }
}

Answer 2

我认为它会起作用。

.menu-nav {
    z-index: 1000;
}