html - 谁能解释为什么我的 Z-Index 没有按预期工作？

Question

您好，我正在尝试创建一个“粘性”导航栏，但是页面下方的内容在滚动后出现在导航栏的顶部。我试过将 z-indexes 应用于导航，但不确定为什么它不起作用。任何帮助将不胜感激!

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>

提前致谢

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%;
}

这是一个有效的 pen基于你的 fiddle 。