我的导航栏在滚动期间位于我的内容下方答案

【问题标题】：My navbar is under my content during scrolling我的导航栏在滚动期间位于我的内容下方
【发布时间】：2021-10-13 13:11:26
【问题描述】：

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

我的导航栏代码：

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

【问题讨论】：

您问题中的最后一个li 元素在a 内有一个未正确关闭的href。你也可以提供一个MRE

标签： html css scroll navbar bootstrap-5

【解决方案1】：

为您的导航栏添加高 z-index 以使其保持在其他元素之上（具有较低 z-index）：

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

【讨论】：