导航栏Logo在带背景动画的页面点击无响应问题求助

导航栏内的可点击Logo，在除JavaScript测验最终页面（该页面播放背景动画）之外的所有页面都能正常跳转。已调整动画与Logo的z-index值，但问题仍未解决，求排查思路。

页面HTML代码 #

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SPLANETS</title>
    <meta content="" name="description">
    <meta content="" name="keywords">
    <!-- Favicons -->
    <link href="assets/img/splanets.ico" rel="icon">
    <!-- Main Bootstrap Css-->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
    <!-- Main CSS File -->
    <link href="assets/css/style.css" rel="stylesheet">
    <!--Icons-->
    <script src="https://kit.fontawesome.com/128d236a07.js" crossorigin="anonymous"></script>
</head>
<body id="">
  <!-- === Header === -->
  <header>
    <nav class="navbar">
      <div class="container-fluid">
        <a class="navbar-brand mx-auto" href="index.html"><img src="assets/img/splanetslogo1.png" alt="Splanets Logo" class="img-fluid logo rocket-logo"></a>
      </div>
    </nav>
  </header>
  <!--End of Header-->
    <div class="rocket-overlay"></div>
    <video class="fullscreen-video" id="myVideo" autoplay="autoplay" muted >
        <source src="assets/img/rocketlaunch.mp4">
        Your browser does not support the video tag.
    </video>
    <section>
        <div class="card retrycard" style="width: 18rem;">
          <div class="card-body">
            <h5 class="card-title">Woohooo! Blast Off!!</h5>
            <h6 class="card-subtitle mb-2 text-muted"></h6>
            <p class="card-text">10/10! <br> Enter your name below to claim your spot on our leaderboard;
            </p>
            <a href="index.html" class="btn rewatch-btn" role="button"><i class="fa-solid fa-play"></i> Watch the video again</a>
            <br>
            <a href="game.html" class="btn replay-btn" role="button"><i class="fa-solid fa-rocket"></i> Restart Quiz</a>
          </div>
        </div>
      </section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<script src="/assets/js/script.js"></script>
</body>
</html>

页面CSS代码 #

/* Winner Rocket Launch */
.fullscreen-video {
    position: fixed;
    overflow: hidden;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translateX(-50%) translateY(-50%);
    z-index: -3;
}

.rocket-overlay {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}

.logo .rocket-logo {
    transform: translate(-40px);
    max-height: 130px;
    z-index: -4;
}

• 修正Logo的z-index值：当前Logo的z-index为-4，低于视频的-3，导致它在视频下方，点击会直接穿透到视频层。把Logo的z-index改为正数（比如z-index: 999;），确保它处于所有元素的最上层。
• 处理全屏叠加层：.rocket-overlay是全屏fixed定位元素，未设置z-index时会默认覆盖静态元素，可能挡住Logo。给它设置z-index: -1;，让它处于Logo下方。
• 验证点击区域有效性：用浏览器开发者工具（F12）检查<a>标签的实际点击范围，确认是否被其他元素覆盖。也可以在控制台执行document.querySelector('.navbar-brand').click()，如果能触发跳转，说明是点击区域被遮挡；如果没反应，可能是事件被拦截。
• 排查JavaScript干扰：检查script.js中是否存在阻止默认事件的代码（比如preventDefault()、stopPropagation()），尤其是针对导航栏或全局点击事件的拦截逻辑。
• 确保导航栏层级：给<header>添加position: relative; z-index: 999;，保证整个导航栏区域都处于最高层级，避免被其他fixed元素覆盖。

内容的提问来源于stack exchange，提问作者Pellis