我使用引导导航栏。当我向上滚动时.. 块内容出现在导航栏后面。导航栏固定在顶部[重复]答案

【问题标题】：I use bootstarp navbar. When I scroll up.. the block content appear behind the navbar. Navbar fixed on the top [duplicate]我使用引导导航栏。当我向上滚动时.. 块内容出现在导航栏后面。导航栏固定在顶部[重复]
【发布时间】：2021-02-22 05:24:37
【问题描述】：

我使用 bootstarp 导航栏。当我向上滚动时.. 块内容出现在导航栏后面。导航栏固定在顶部。

我的导航栏

<main id="navfix" class="m-5">
    <nav class="navabar_bgc py-0 navbar navbar-expand navbar-light fixed-top">


        {% include 'sidebar.html' %}

        <div class="collapse navbar-collapse" id="collapsibleNavId">
            <ul class="navbar-nav ml-auto mt-lg-0">
               <div>...</div>
            </ul>
        </div>
    </nav>
</main>

<div class="block__content">
{% block content %}
{% endblock %}
</div>

我的 CSS：

#navfix {
  width: 100%;
}
.navabar_bgc {
  background-color: rgba(103, 250, 34, 0.4) !important;
  box-shadow: 0px 0px 8px !important;
  z-index: 10 !important;
}
.block__content {
  z-index: 5;
  overflow: auto;
}

任何其他建议请给我..谢谢。

【问题讨论】：

您在此处为颜色添加了 alpha/opacityrgba(103, 250, 34, 0.4) 0.4 是问题所在。将值增加到 1，导航栏将变为实心。
发生这种情况是因为您使用 alpha 值设置了背景颜色，这会影响导航栏的不透明度。如果您不希望内容出现在导航栏后面，我建议您删除不透明度值。 background-color: rgb(103, 250, 34);

标签： html css django bootstrap-4

【解决方案1】：

我编辑了您的代码并添加了一些演示文本来叙述解决方案。希望这对你有用。

解决方法：我定位block__contentabsolute

#navfix {
  width: 100%;
  position: fixed;
}
.navabar_bgc {
  background-color: rgba(103, 250, 34, 0.4) !important;
  box-shadow: 0px 0px 8px !important;
  z-index: 10 !important;
}
.block__content {
    z-index: 5;
    overflow: auto;
    height: calc(100% - 100px);
    position: absolute;
    top: 60px;
}

<main id="navfix" class="m-5">
    <nav class="navabar_bgc py-0 navbar navbar-expand navbar-light fixed-top">


        {% include 'sidebar.html' %}

        <div class="collapse navbar-collapse" id="collapsibleNavId">
            <ul class="navbar-nav ml-auto mt-lg-0">
               <div>...</div>
            </ul>
        </div>
    </nav>
</main>

<div class="block__content">
<p>
  Some contentSome contentSome contentSome contentSomeSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contententSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome content contentSome contentSome contentSome contentSome contentSome content
</p>
</div>

【讨论】：