实现CSS - Sidenav覆盖覆盖所有页面

Question

我正在使用Materialise css，并且我想在中和小屏幕中将导航栏变成sidenav。我做了就像在documentation。问题是，当我点击菜单按钮，sidenav被打开，但它是像下面

像我无法点击，因为sidenav叠加的sidenav链接覆盖所有页面即使是sidenav本身。当我尝试点击链接时，它正在关闭。任何建议如何解决它？

HTML：

 <div class="navbar-fixed"> 
      <nav class=""> 
       <div class="nav-wrapper red lighten-1"> 
        <div class="container-fluid"> 
         <a href="#!" class="brand-logo"> 
          <img src="img/logo.png"> 
         </a> 
         <a href="#" data-activates="mobile-sidenav" class="button-collapse"><i class="material-icons">menu</i></a> 
         <ul class="right hide-on-med-and-down"> 
          <li><a href="#">How It Works?</a></li> 
          <li><a href="#">Technology</a></li> 
          <li><a href="#">Pricing</a></li> 
          <li><a href="#">More</a></li> 
          <li><button class="waves-effect waves-light btn deep-orange">Request Demo</button></li> 
         </ul> 
         <ul class="side-nav" id="mobile-sidenav"> 
          <li><a href="#">How It Works?</a></li> 
          <li><a href="#">Technology</a></li> 
          <li><a href="#">Pricing</a></li> 
          <li><a href="#">More</a></li> 
          <li><button class="waves-effect waves-light btn deep-orange">Request Demo</button></li> 
         </ul> 
        </div> 
       </div> 
      </nav> 
     </div> 

我意识到，导航栏固定有997 z-index（其中sidenav叠加也是997），我认为这可能会导致问题。但是，side-nav具有固定位置和999的z-index。即使它具有固定位置，它是否依赖于其父项？

编辑：我可以通过更改sidenav-overlay的left属性来解决它，但我不想手动设置它。我正在寻找另一种解决方案。

Answer 1

我有同样的问题。由于<ul class="side-nav">包含在<div class="navbar-fixed">和中，所以叠加层具有相同的z-索引，使用navbar-fixed时总是会遇到此问题。

您可以使用各种元素的z索引，但是当激活side-nav时，它们每个都会导致不理想的显示。

要解决这个问题，我把<ul class="side-nav">平行于文档结构<div class="navbar-fixed">和问题自行解决。像这样：

<ul class="side-nav" id="mobile-sidenav"> 
    <li><a href="#">How It Works?</a></li> 
    <li><a href="#">Technology</a></li> 
    <li><a href="#">Pricing</a></li> 
    <li><a href="#">More</a></li> 
    <li><button class="waves-effect waves-light btn deep-orange">Request Demo</button></li> 
</ul> 
<div class="navbar-fixed"> 
    <nav class=""> 
    <div class="nav-wrapper red lighten-1"> 
     <div class="container-fluid"> 
     <a href="#!" class="brand-logo"> 
      <img src="img/logo.png"> 
     </a> 
     <a href="#" data-activates="mobile-sidenav" class="button-collapse"><i class="material-icons">menu</i></a> 
     <ul class="right hide-on-med-and-down"> 
      <li><a href="#">How It Works?</a></li> 
      <li><a href="#">Technology</a></li> 
      <li><a href="#">Pricing</a></li> 
      <li><a href="#">More</a></li> 
      <li><button class="waves-effect waves-light btn deep-orange">Request Demo</button></li> 
     </ul> 
     </div> 
    </div> 
    </nav> 
</div>