javascript - 导航低于元素 - z-index 不工作

Question

所以我有一个导航栏，它位于标题下方，当它到达视口(viewport)顶部时，它会变得粘滞。我正在使用 jquery.sticky 库来做到这一点。

问题是，滚动时，网页上的其他元素会位于导航顶部。导航仍然是黑色的(因为黑色是它的颜色)但我可以看到文本和图像在它上面。

我尝试在 CSS 导航下方的元素上使用以下代码:

position: relative;
z-index: -1;

完成工作，现在导航是顶部元素，但我在页面底部有一个表单，因此无法访问输入字段。

这是我的代码:

HTML

<section class="navigacija" id="sticky-nav">
    <nav>
        <ul>
           <div class="container">
              <div class="row">
                 <div class="col-md-4">
                    <li id="nav-about"><a href="#">about</a></li>
                 </div>
                 <div class="col-md-4">
                    <li id="nav-devs"><a href="#">devs</a></li>
                 </div>
                 <div class="col-md-4">
                    <li id="nav-joinus"><a href="#">join us</a></li>
                 </div>
              </div>
           </div>
        </ul>
    </nav>
</section>

CSS:

.navigacija {
    background-color: #000;
    padding: 5px 0 5px 0;
    text-align: center;
    line-height: 50px;
}

JS:

$(window).load(function(){
      $("#sticky-nav").sticky({ topSpacing: 0 });
    });

谁能帮帮我？

所有文件 -> https://drive.google.com/open?id=0B2VRToUeRJBUTTRXc2t4THdnaUU

Answer 1

根据您的情况，您需要将高 z-index 添加到 #sticky-nav-sticky-wrapper。例如:

#sticky-nav-sticky-wrapper {  
  position: relative; 
  z-index: 999;
}

或者您可以将 !important 添加到 .navigacija 中。例如:

.navigacija {
    background-color: #000;
    padding: 5px 0 5px 0;
    text-align: center;
    line-height: 50px;
    position: relative;
    z-index: 999!important;
}

你需要它，因为 jquery 插件添加了它自己的带有 style 属性的样式。而且他们有更多的优先权