时间戳

首页 > 解决方案 > 导航栏仅在网站的一个部分中不可点击

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

问题描述

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

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

标签： htmlcssflexboxnavbar

解决方案

添加一个z-index到您#nav-bar的堆叠它高于“展示部分”。

z-index: 99999;

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

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

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

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

祝你好运！

推荐阅读