Question

所以我的导航栏位于标题下方，当它到达视口顶部时会变得很粘。我使用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 });
    });

任何人都可以帮助我吗？

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

Answer 1

我的情况是你需要将hight 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 属性添加自己的样式。他们有更多的优先权

导航位于元素下方 - z-index不起作用

1 个答案: