Sidenav materializecss window dim

我正在使用materializecss，而且我必須將z-index放入navbar類，因爲navbar隱藏在我的全屏滑塊下面。現在一切正常，但當我想點擊我的側欄時，我有這個問題： problem Sidenav materializecss window dim

整個窗口變暗，我不能點擊任何地方。我覺得我做錯了什麼事與z-index的這裏的CSS代碼：

.slider { 
    width: 100%; 
    height: 100%; 
    position: fixed; 
    top: 0; 
    left: 0; 
    z-index: 1; 
} 
#nav{ 
    z-index: 10; 
    position: relative; 
} 
.sideNav { 
    z-index: 11; 
}

HTML：

<!DOCTYPE html> 
<html> 

<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <script type="text/javascript" src="bootstrap/js/jquery-2.2.0.js"></script> 
    <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css"> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script> 
    <script src="script.js"></script> 


    <link rel="stylesheet" href="style.css"> 

</head> 

    <nav id="nav" class=" blue lighten-4"> 
     <div class="nav-wrapper"> 
      <a href="index.html" class="brand-logo center"><img src="/img/logo_reh.png"></a> 
      <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a> 
      <ul class="left hide-on-med-and-down"> 
       <li class="active"><a href="index.html">Główna</a></li> 
       <li class="active"><a href="kontakt.html">Kontakt</a></li> 
      </ul> 
      <ul class="side-nav" id="mobile-demo"> 
       <li class="active"><a href="index.html">Główna</a></li> 
       <li class="active"><a href="kontakt.html">Kontakt</a></li> 
      </ul> 
     </div> 
    </nav> 





<div id="szczupix" class="container"> 
    <div class="row"> 

     <div class="slider fullscreen"> 
      <ul class="slides"> 
       <li> 
        <img src="http://lorempixel.com/1200/1000/food/" alt="blad"> 
        <div class="caption center-align"> 
         <h3> Lekarze specjaliści</h3> 
         <h5> Możliwość wykonania specjalistycznych badać lekarskich</h5> 
        </div> 
       </li> 
       <li> 
        <img src="http://lorempixel.com/1200/1000/food/" alt="blad"> 
        <div class="caption center-align"> 
         <h3> Tylko świeże warzywa i owoce</h3> 
         <h5> Pochodzące z naszych polskich upraw</h5> 
        </div> 
       </li> 
       <li> 
        <img src="http://lorempixel.com/1200/1000/food/" alt="blad"> 
        <div class="caption right-align"> 
         <h3> Nowoczesny lokal</h3> 
         <h5> Przestronność i nowoczesność to nasz slogan</h5> 
        </div> 
       </li> 
      </ul> 
     </div> 
    </div> 
</div> 

</div> 


    <script> 
     //sivenav 
     $(".button-collapse").sideNav(); 
     //slider 
     $('.slider').slider({ 
      height: 600 


     }); 
     $('.parallax').parallax(); 
     $('.scrollspy').scrollSpy(); 

     $('.collapsible').collapsible({ 
      accordion: false // A setting that changes the collapsible behavior to expandable instead of the default accordion style 
     }); 
    </script> 

</html>

來源

2016-03-11 Xeremo

你的情況：

#nav{ 
    z-index: 10; 
    position: relative; 
} 

#sidenav-overlay { 
    z-index: 9 
}

添加到您的風格。

Demo

來源

2016-03-11 15:41:19 Mentori

添加到您自己的CSS類來去除覆蓋陰影

#sidenav-overlay { 
    z-index: 1 
}

來源

2016-08-12 20:25:29

問題是你assigning.you都到sideNav給予更大的z-index的z-index的你應該給予更大的z-index你#nav這樣

#nav{ 
z-index: 10; 
position: relative;

} .sideNav { z-index: 11; }

來源

2017-09-13 10:34:28 LSKhan

Sidenav materializecss window dim

回答

相關問題