导航栏仅在网站的一个部分中不可点击答案

【问题标题】：Navbar isn't clickable in just one section of site导航栏仅在网站的一个部分中不可点击
【发布时间】：2019-03-22 21:42:44
【问题描述】：

我希望导航栏保持在固定位置。它工作正常，但在我的展示部分中无法点击链接。只要您向下滚动，它就会再次变为可点击。我需要帮助了解为什么会发生这种情况

 <nav id="nav-bar">
      <h2 class="logo">
      <span class="txt-primary"><i class="far fa-moon"></i></span> | MMM
    </h2>
      <ul>
        <li class="nav-link"><a href="#about">About</a></li>
        <li class="nav-link"><a href="#service">Services</a></li>
        <li class="nav-link"><a href="#videos">Videos</a></li>
        <li class="nav-link"><a href="#contact">Contact</a></li>
      </ul>
    </nav>

CSS：

#nav-bar {
  display: flex;
  position: fixed;
  width: 100%;
  background: rgba(60,3,56,0.8);
  color: #dbd8e5;
  justify-content: space-between;
  padding: 0.4rem;
}

#nav-bar ul {
  display: flex;
  align-items: center;
}

#nav-bar ul li a {
  padding: 0.55rem;
  color: #7c72a0;
}
#nav-bar ul li a:hover {
  background: #5f0d45;
  color: #dbd8e5;
  padding: 0.75rem;
}

【问题讨论】：

可能是堆叠问题....您是否尝试过设置较高的z-index？比你的“展示部分”更高的东西，但你可以在#nav-bar 上尝试z-index: 99999;，只是为了测试
考虑回答@zgood 的问题

标签： html css flexbox navbar

【解决方案1】：

将z-index 添加到您的#nav-bar 以使其高于“展示部分”。

z-index: 99999;

任何具有position 值而不是默认值static 的元素都可以堆叠在z 轴上（您的导航是position: fixed;）。较高的数字位于顶部。

您可以设置一个非常高的无意义值，例如 99999，但我建议给它一个有意义且您可以管理的数字。找出“展示部分”的z-index，并将其设置得更高。如果没有设置z-index，那么简单的z-index: 1; 就可以工作（但感觉它的导航值越大越好）。

如果您使用 sass 或更少，您可以通过为您的网站 z-index's 设置变量来更轻松地跟踪。

另外，请阅读the stacking context，因为它比设置更高的数字更复杂。

祝你好运！

【讨论】：