文章/答案/技术大牛

发布

社区首页 >问答首页 >Sidenav窗口暗淡

问Sidenav窗口暗淡
EN

Stack Overflow用户

提问于 2016-03-11 23:14:53

回答 3查看 1.6K关注 0票数 0

我正在使用materializecss，我不得不将z-index放入navbar类中，因为navbar隐藏在我的全屏滑块下面。现在一切都好了，但是当我想单击我的侧边栏时，我遇到了这个问题：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

回答 3

Stack Overflow用户

发布于 2016-03-11 23:41:20

在您的案例中：

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

#sidenav-overlay {
  z-index: 9
}

添加到您的样式。

Demo

票数 1

Stack Overflow用户

发布于 2016-08-13 04:25:29

将此代码添加到您自己的css类中，以移除覆盖阴影

#sidenav-overlay {
  z-index: 1
}

票数 0

Stack Overflow用户

发布于 2017-09-13 18:34:28

问题是您assigning.you为sideNav提供了更大的z索引，您应该为您的#nav提供更大的z索引，如下所示

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

} .sideNav { z-index: 11; }

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/35943717

复制

相似问题

问Sidenav窗口暗淡
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Sidenav窗口暗淡EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Sidenav窗口暗淡
EN