Question

我使用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>

Answer 1

在你的情况下：

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

#sidenav-overlay {
  z-index: 9
}

添加你的风格。

Demo

Answer 2

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

#sidenav-overlay {
  z-index: 1
}

Answer 3

问题在于你指定的z-index。你给 sideNav 提供了更大的z-index你应该为你的 #nav 提供更大的z-index

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

} .sideNav { z-index: 11; }

Sidenav materializecss窗口暗淡

3 个答案: