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

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;
}

The z-index CSS property specifies the z-order of a positioned element and its descendants. When elements overlap, z-order determines which one covers the other. An element with a larger z-index generally covers an element with a lower one.

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

---

编辑

A working plnkr