有人能解释一下为什么我的Z-Index没有按预期工作吗？

Question

你好，我正在尝试创建一个“粘性”导航栏，但是在滚动后，页面下方的内容会覆盖导航栏。我尝试为导航应用z-index，但不确定为什么它不起作用。非常感谢任何帮助！

HTML

        <!-- Start Header -->
    <header classs="parallax">
        <section id="stickynav">
            <div class="container-responsive">
                <div class="row">
                    <div class="col-lg-4">
                        <h1>Title</h1>
                    </div>
                    <div class="col-lg-6">
                        Content
                    </div>
                    <div class="col-lg-2">
                        Content
                    </div>
                </div>
            </div>
        </section>
    </header>
    <!-- End Header -->
    <!-- Start Main -->
    <section id="main">
        <div class="container">
            <h2>About Us</h2>
        </div>
    </section>
    <!-- End Main -->

CSS

header {
    width: 100%;
    height: 90%;
    background-image: url('../images/slider/accounting-banner.jpg');
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%);
    color: #fff;
}
section#stickynav {
    position: fixed;
    z-index: 9999;
    height: 12%;
    width: 100%;
    padding-top: 1%;
    padding-left: 2%;
    padding-bottom: 1%;
    padding-right: 2%;
}
.stickystyle {
    background-color: #FFF;
    -webkit-box-shadow: 0px 1.5px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 1.5px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 1.5px 5px 0px rgba(0,0,0,0.75);
    color: #000;
}
section#main {
    margin-top: -2.5%;
    position: relative;
    z-index: -1;
}

JS

<script>
    var sn = $("#stickynav");
    $(window).scroll(function() {
        if($(this).scrollTop() > 100) {
            sn.addClass("stickystyle");
        } else {
            sn.removeClass("stickystyle");
        }
    });
</script>

感谢您的提前帮助。

- user8309120

---

你可以制作JSFiddle吗？ - Grasper

我无法重现这个问题。请创建一个功能性示例来帮助演示。 - showdev

我在这里创建了一个jsfiddle https://jsfiddle.net/j1bnLeaa/，展示了这个问题（尽管它没有正确显示布局）。我不确定这是否是浏览器问题。我刚试图在我的Macbook上访问该网站，在Safari上可以正常工作，但在Windows上在Chrome / Opera上无法正确显示。 - user8309120

尝试将导航栏从头部标签中取出。导航栏应该覆盖在头部之上，而不是在其中。 - Elan Hamburger

啊，我现在搞定了。将标题移到外面就可以了！非常感谢！ :) - user8309120

Answer 1

尝试将导航器移出标题。这是一个片段：

<!-- Start Header -->
    <header></header>
    <!-- End Header -->
<!-- Start Navigator -->
    <section id="stickynav">
            <div class="container-responsive">
                <div class="row">
                    <div class="col-lg-4">
                        <h1>Title</h1>
                    </div>
                    <div class="col-lg-6">
                        Content
                    </div>
                    <div class="col-lg-2">
                        Content
                    </div>
                </div>
            </div>
        </section>
<!-- End Navigator -->

这是 CSS：

html {
    overflow-y: scroll;
    overflow-x: hidden;
}

html, body {
    min-height: 100%;
    min-width: 100%;
    height: 100%;
    width: 100%;
  }

header {
   width: 100%;
   height: 90%;
   background-image: url('https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/TD1JOZO7IX.jpg');
   background-attachment: fixed;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%);
   clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%);
   color: #fff;
}
h1 {
    display: inline-block;
    background: url('../images/logo.png');
    height: 250px;
    background-size: contain;
    background-repeat: no-repeat;
    text-indent: -9999px;
}
section#stickynav {
    position: fixed;
  top: 0;
    z-index: 9999;
    height: 12%;
    width: 100%;
    padding-top: 1%;
    padding-left: 2%;
    padding-bottom: 1%;
    padding-right: 2%;
}
.stickystyle {
    background-color: #FFF;
    -webkit-box-shadow: 0px 1.5px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 1.5px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 1.5px 5px 0px rgba(0,0,0,0.75);
    color: #000;
}

section#main {
    margin-top: -2.5%;
}

这是一个基于你的代码片段工作的笔。

- Rob Welan