锚标签/链接在使用位置时不起作用：绝对；在我的导航中（我在后台有一个视频）

Question

我的标题带有“背景”中的视频。最重要的是，我想拥有一个菜单，当该菜单开始工作时，我的锚标签/链接停止工作。我该如何使用它？

HTML

<nav class="menu">
      <a href="#" target="_blank">ABOUT</a>
      <a href="#" target="_blank">PRICES</a>
      <a href="#" target="_blank">CONTACT</a>
    </nav>

<div class="video-container">
      <video class="video-tablet" autoplay loop>
        <source src="videos/SampleVideo_720x480_1mb.mp4" type="video/mp4">
        <source src="videos/SampleVideo_720x480_1mb.webm" type="video/webm">
        Your browser does not support the video tag.
      </video>
    </div>

CSS

.video-tablet {
    display: flex;
    width: 100%;
}

.menu {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    padding: 1%;
    position: absolute;
}

.menu a {
     color: white;
     font-size: 20px;
     font-weight: bold;
}

.menu a:hover {
     color: #559565;
}

Answer 1

您的问题是您的video位于导航栏的前面。因此，如果您尝试单击导航栏，则实际上是在单击不执行任何操作的video。要解决此问题，您必须说导航栏在video的前面。您可以将规则css用于该z-index：

.video-tablet {
  display: flex;
  width: 100%;
}

.menu {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  padding: 1%;
  position: absolute;
  z-index: 1;      /* <-- Add a z-index value to .menu */
}

.menu a {
  font-size: 20px;
  font-weight: bold;
}

.menu a:hover {
  color: #559565;
}

<nav class="menu">
  <a href="#" target="_blank">ABOUT</a>
  <a href="#" target="_blank">PRICES</a>
  <a href="#" target="_blank">CONTACT</a>
</nav>

<div class="video-container">
  <video class="video-tablet" autoplay loop>
    <source src="videos/SampleVideo_720x480_1mb.mp4" type="video/mp4">
    <source src="videos/SampleVideo_720x480_1mb.webm" type="video/webm">
    Your browser does not support the video tag.
  </video>
</div>