Question

我尝试将导航栏固定在顶部。它的确如此，但当我滚动它时，它就在它下面的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;
}

Answer 1

在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元素的元素。

https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

修改

A working plnkr

我的导航栏（贴在顶部）移动到其下方的其他div下

1 个答案:

修改