滚动时我的导航栏在我的内容下面

Question

当我加载我的网站时，一切都在正确的位置，但是当我开始滚动时，我的内容会出现在我的导航栏上并隐藏在屏幕顶部（当我滚动我的内容时，我的导航栏是部分可见的，但仍然在我页面的顶部），但我希望我的导航栏始终位于屏幕顶部，而我的内容隐藏在我的导航栏下方。

我的导航栏代码：

<a class="navbar-brand d-flex align-items-center" href="/">
    <a class="navbar-brand" href="/"><img src="img/full_trimmed_transparent_base (3).png" width="381"height="76" class="d-inline-block mr-1 align-bottom" alt=""></a>
</a>

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainmenu" aria-controls="mainmenu" aria-expanded="false" aria-label="...">
    <span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="mainmenu">

    <ul class="navbar-nav ml-auto">

        <li class="nav-item active">
            <a class="nav-link" href="/home"> START </a>
        </li>

        <li class="nav-item">
            <a class="nav-link" href="/about_cattery"> O ... </a>
        </li>

        <li class="nav-item">
            <a class="nav-link" href="#"> ...</a>
        </li>

        <li class="nav-item">
            <a class="nav-link " href="#"> ...</a>
        </li>

        <li class="nav-item">
            <a class="nav-link" href="#"> ... </a>
        </li>

        <li class="nav-item">
            <a class="nav-link" href="#">...</a>
        </li>

        <li class="nav-item">
            <a class="nav-link" href="/kontakt"> ...</a>
        </li>
    </ul>
    <ul class="navbar-nav sm-icons">
        <li class="nav-item"><a class="nav-link" href="https://www.facebook.com/...
            <i class="fab fa-facebook-square icon"></i></a>
        </li>
    </ul>
</div>

我的 css 导航栏：

.navbar {
    position: fixed;
    top: 0;
    background-color: rgba(240,240,240,0.5);
    width: 100%;

}

.nav-item {
    font-size: 100%;
     padding-left:3px;
     padding-right:3px;
}

.icon {
    color: #3b5998;
    font-size: 120%;
}

.icon:hover {
    color: #92a6d3;
}

.scrolled {
    background-color: rgba(240,240,240,0.9) !important ;
}

内容-css:

body {
    padding-top: 120px;
}

Answer 1

向导航栏添加高 z-index 以使其高于其他元素（具有较低的 z-index）：

.navbar {
    position: fixed;
    top: 0;
    background-color: rgba(240,240,240,0.5);
    width: 100%;
    z-index: 99999999;
}

滚动时我的导航栏在我的内容下面

My navbar is under my content during scrolling

html

css

scroll

navbar

bootstrap-5