html - 导航栏不能仅在站点的一个部分中单击

Question

我希望导航栏保持在固定位置。它工作正常，但在我的展示部分中无法单击链接。一旦向下滚动，它就会再次变为可点击状态。我需要帮助来理解为什么会这样

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

Answer 1

将 z-index 添加到您的 #nav-bar 以将其堆叠到比“展示部分”更高的位置。

z-index: 99999;

任何具有 position 值而不是默认值 static 的元素都可以堆叠在 z 轴上(您的导航是 position: fixed;)。较高的数字在最上面。

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

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

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

祝你好运!