html - 我的导航栏(粘贴在顶部)在其下面的另一个div下方移动

标签 html css navbar

我尝试将导航栏固定在顶部。它是做什么的,但是当我滚动时,它在它下面的div下方。
这是html:

<nav class="navbar navbar-light navbar-expand-md">
    <div class="container-fluid">
    <a href="index.html">
    <img src="apex_logo2.png" class="img-fluid" style="height:56px;padding-top:0px;" />
    </a>
    <button data-toggle="collapse" data-target="#navcol-1" class="navbar-toggler">
    <span class="sr-only">Toggle navigation</span>
    <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse"
        id="navcol-1">
    <ul class="nav navbar-nav ml-auto">

    <li role="presentation" class="nav-item"><a href="gallery.html" class="nav-link">Gallery</a>
        </li>
    <li role="presentation" class="nav-button"><a href="https://docs.google.com/forms/d/e/1FAIpQLSd4gF8KeSGBZ-KSqwIR-OSBdYuq4TuqCFocAretS1cZdLtWdQ/viewform" class="nav-link">Contact</a></li>
        </ul>
    </div>
</div>



这是CSS:

.navbar { 
    margin-bottom: 0;
    position: sticky;
    top: 0; 
    width: 100%;
    background-color: #efefef;
}

最佳答案

z-index添加到您的.navbar类。

.navbar { 
    margin-bottom: 0;
    position: sticky;
    top: 0; 
    width: 100%;
    background-color: #efefef;
    z-index: 100;
}



  z-index CSS属性指定定位元素及其后代的z顺序。当元素重叠时,z顺序确定哪个覆盖另一个。具有较大z-index的元素通常会覆盖具有较低z-index的元素。
  
  https://developer.mozilla.org/en-US/docs/Web/CSS/z-index




编辑

A working plnkr

关于html - 我的导航栏(粘贴在顶部)在其下面的另一个div下方移动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49524206/

相关文章:

javascript - 正确的HTML链接不起作用(浏览器中的最后7个字符被 chop )?

html到excel转换与嵌入图像

html - 更改 Bootstrap 导航栏的不透明度而不是文本

html - 使图像位置响应?

javascript - <a> 和 <button> 用于创建链接时是否有任何性能差异?

html - 具有不同大小的内容 + 分隔线的相等 flexbox 网格

javascript - “文字装饰:眨眼”和IE

php - CSS Sprites显示错误的图像-在localhost中工作

jquery - 使用HTML,CSS和JQuery自动调整出发板的大小

javascript - Bootstrap jQuery 选项卡在下拉菜单中不起作用