實現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>