Sidenav materializecss 窗口暗淡答案

【问题标题】：Sidenav materializecss window dimSidenav materializecss 窗口暗淡
【发布时间】：2016-03-11 15:14:53
【问题描述】：

我正在使用 materializecss，我不得不将 z-index 放入导航栏类，因为导航栏隐藏在我的全屏滑块下。现在一切都好，但是当我想点击我的侧边栏时，我遇到了这个问题： problem

整个窗口变暗，我无法点击任何地方。我认为我的 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>

【问题讨论】：

标签： css materialize

【解决方案1】：

在你的情况下：

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

#sidenav-overlay {
  z-index: 9
}

添加到您的样式中。

Demo

【讨论】：

【解决方案2】：

将此添加到您自己的 css 类中以删除覆盖阴影

#sidenav-overlay {
  z-index: 1
}

【讨论】：

【解决方案3】：

问题在于您分配的 z-index。您正在为 sideNav 提供更大的 z-index，您应该像这样为您的 #nav 提供更大的 z-index

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

} .sideNav { z-index: 11; }

【讨论】：