Html 导航栏不是'；不能只在网站的一个部分点击

我希望导航栏保持在固定位置。它工作正常，但在我的showcase部分中无法单击链接。一旦你向下滚动，它将再次成为可点击的。我需要帮助理解为什么会发生这种情况

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

---

将

z索引

添加到

#导航栏

以将其堆叠到高于“showcase部分”的位置

z-index:99999

除了默认的
静态
之外，任何具有
位置
值的元素都可以堆叠在z轴上（您的导航是
位置：固定的；
）。更高的数字在顶部

你可以设置一个很高的无意义的值，比如99999，但我建议给它一个有意义的数字，你可以管理它。找出“showcase部分”的
z索引
，并将其设置为高于该值。如果未设置
z-index
，则简单的
z-index:1
可以工作（但是感觉到它是一个导航，数字越高越好）

如果您使用sass或更少，您可以通过为站点设置变量来更轻松地跟踪

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

祝你好运
 可能是堆叠问题。。。。您是否尝试过设置高
z索引
？比你的“展示区”更高的东西，但是你可以尝试像
z-index:99999仅用于测试考虑回答问题@zgood
#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;
}