Question

你好我的项目我有一个navbar navbar-default类，当我要滚动我的网站时，这个菜单与我的内容重叠。

这是我的

我找到了一个脚本，将此菜单修复到顶部但仍与我的内容重叠，这是脚本

 window.onscroll = changePos;

    function changePos() {
        var header = document.getElementById("uno");
        if (window.pageYOffset > 70) {
            header.style.position = "fixed";
            header.style.top = "0";
        } else {
            header.style.position = "";
            header.style.top = "";
        }
    }

我也有导航栏菜单的css代码和html代码，这就是代码

.nav.navbar-nav li a{
    color:black;
}

 .navbar-default{
     margin: auto;
     background: rgb(178,205,73);
     }


.nav.navbar-nav {
    display: inline-block;
    left: 0;
    right: 0;
    text-align:center;
    width:100%;

}

.nav.navbar-nav li,.nav.navbar-nav li  a
{
    display:inline;
    float:none;
    line-height:40px;
}

.right.carousel-control, .left.carousel-control{

 background:linear-gradient( rgba(146,211,236,1.00) 15%, rgb(0,171,235) 150%   );

}


.item.active ,.carousel-inner{
    background-color: rgba(146,211,236,1.00) ;
}

这是我的菜单

 <div class="row">
                  <div class="col-md-12" id="uno">
                    <nav class="navbar navbar-default">
                                 <div class="navbar-header">
                                             <button type="button" 
                                              class="navbar-toggle collapsed" 
                                               data-toggle="collapse" data-
                                       target="#navbar" aria-expanded="false" 
                                          aria-controls="navbar">
                                                 <span class="sr-only">Toggle 
                                                 navigation</span>
                                                 <span class="icon-bar"></span>
                                                 <span class="icon-bar"></span>
                                                  <span class="icon-bar"></span>
                                              </button>
                                          </div>
                                           <div id="navbar" class="navbar-
                                              collapse collapse">
                                                <ul class="nav navbar-nav">
                                                <li><a href="#">Conozcanos</a>
                                                </li>
                                                 <li><a href="#">Derechos y 
                                                  Deberes Del Usuario</a>
                                                 </li>
                                                  <li><a 
                                                  href="#">Responsabilidad 
                                                  Social</a>
                                                  </li>
                                                  <li><a href="#">Correo 
                                                   Corporativo</a>
                                                  </li>
                                                  </ul>
                                                </div>
                                           </nav>
                                       </div>
                                   </div>

Answer 1

为了让您的菜单保持在最顶层，我建议您使用stickyjs。这应该可以消除你遇到的任何其他问题。屏幕截图还有助于了解您的具体问题

Answer 2

尝试将以下代码添加到CSS文件中：

.navbar{
    z-index: 9999; /* You can add any positive number here */
}

z-index属性将使您的元素保持在其他元素之上。

导航栏默认与内容重叠

2 个答案: