调整Banner高度后导航链接失效的技术求助

我仅需在特定页面缩小Banner高度，使用内联CSS将其调整至所需高度后，导航链接却无法正常点击。此前所有链接均可正常工作，以下是相关CSS文件代码及修改前可正常运行的HTML代码，恳请协助排查问题。

相关CSS代码 #

/* Nav User Page*/
.nav-borders .nav-link.active {
  text-decoration-color: #dc3030;
  border-bottom-color: #dc3030;
  color: #dc3030; 
}

.nav-borders .nav-link.active b {
  color: #dc3030; 
}

.nav-borders .nav-link {
  color: #222222;
  border-bottom-width: 0.125rem;
  border-bottom-style: solid;
  border-bottom-color: transparent;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 0;
  padding-right: 0;
  margin-left: 1rem;
  margin-right: 1rem;
}

/*Banner and Header*/
.overlay {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.banner-area {
  background: url(../img/header-bg.jpg) center;
  background-size: cover;
}

.banner-area .overlay-bg {
  background-color: rgba(0, 0, 0, 0.7);
}

.banner-content {
  margin-top: -90px;
  text-align: center;
  
}

#header {
  padding: 0px 0px 14px 0;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  transition: all 0.5s;
  z-index: 997;
}

#header hr {
  border-color: rgba(255, 255, 255, 0.3);
  margin-top: 5px;
}

.header-top {
  height: 24px;
  margin-top: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-top a {
  color: #fff;
  font-size: 15px;
}

修改前正常运行的HTML代码 #

<!DOCTYPE html>
<html lang="zxx" class="no-js">
<head>
        <!-- Mobile Specific Meta -->
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <!-- Favicon-->
        <link rel="shortcut icon" href="img/fav.png">
        <!-- Author Meta -->
        <meta name="author" content="codepixer">
        <!-- Meta Description -->
        <meta name="description" content="">
        <!-- Meta Keyword -->
        <meta name="keywords" content="">
        <!-- meta character set -->
        <meta charset="UTF-8">
        <!-- Site Title -->
        <title>User Page</title>

    <link href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" rel="stylesheet">

    <link href="https://fonts.googleapis.com/css?family=Poppins:100,200,400,300,500,600,700" rel="stylesheet"> 
        <!--
        CSS
        ============================================= -->
        <link rel="stylesheet" href="css/linearicons.css">
        <link rel="stylesheet" href="css/font-awesome.min.css">
        <link rel="stylesheet" href="css/bootstrap.css">
        <link rel="stylesheet" href="css/magnific-popup.css">
        <link rel="stylesheet" href="css/nice-select.css">                  
        <link rel="stylesheet" href="css/animate.min.css">
        <link rel="stylesheet" href="css/owl.carousel.css">
        <link rel="stylesheet" href="css/main.css">
       
    </head>
    <body>

      <header id="header" id="home" >
        <div class="container header-top">

                  <div class="logo">
                  
            <div id="logo">
              <a href="index.html"><img src="img/logo.png" alt="" title="" /></a>
          </div>
            </div>
            <nav id="nav-menu-container">
              <ul class="nav-menu">
                <li class="menu-active"><a href="index.html">Home</a></li>
                <li><a href="about.html">Sobre nós</a></li>
                <li><a href="gallery.html">Eventos</a></li>
                <li><a href="event.html">Doações</a></li>
                <li><a href="ticket.html">Propostas</a></li>
                <li><a href="blog-home.html">Contactos</a><li>
                <li class="menu-has-children"><a href="">Artistas</a>
                  <ul>
                    <li><a href="blog-single.html">Adriana Bárbara</a></li>
                    <li><a href="category.html">Maria Venceslau</a></li>
                    <li><a href="elements.html">Laura Gonçalves</a></li>
                    <li><a href="category.html">Concha carvalho</a></li>
                    <li><a href="category.html">Zé Dias </a></li>
                    <li><a href="category.html">André Vaz</a>
                    </li></li>
                  </ul>
                      <li><a 
                          
                      
                      <div class="navbar-user">
                          <a href="index.html">
                              <img src="img/Simbolo.svg" alt="Usuário" />
                          </a>
                      </div>
                  
                                  
              </ul>
            </nav><!-- #nav-menu-container -->                  
          </div>
      </div>
    </header><!-- #header -->

    <!-- start banner Area -->
    <section class="banner-area relative" id="home" style="height: 150px;"> 
      <div class="overlay overlay-bg" style="height: 150px;"></div>
      <div class="container">
          <div class="row d-flex align-items-center justify-content-center">
            <div class="about-content col-lg-12">               
            </div>                                          
          </div>
      </div>
    </section>
    <!-- End banner Area -->

    <!-- Start Page Content Area -->  

      <!-- Nav Profile: Options -->
      <div class="container px-3 mt-3">
        <nav class="nav nav-borders">
          <a class="nav-link active ms-0" href="perfil.html" target="__self" > <b>Perfil</b></a>
          <a class="nav-link" href="propostas_perfil.html" target="__self" > <b>Propostas</b></a>
          <a class="nav-link" href="doacoes_perfil.html" target="_self" > <b>Doações</b></a>
        </nav>

问题原因及解决方案 #

核心原因 #

Banner区域的.overlay元素使用position: absolute且设置了top:0; bottom:0，即使你把Banner高度设为150px，这个遮罩层依然会默认覆盖整个视口，遮挡在固定定位的导航栏上方，拦截了所有点击事件。另外，HTML中header标签重复设置了两个id，属于无效语法，需修正。

解决步骤 #

1. 限制遮罩层的覆盖范围
   修改.overlay的CSS，让它仅覆盖Banner区域：

   .banner-area .overlay {
     position: absolute;
     left: 0;
     right: 0;
     top: 0;
     /* 替换bottom:0为height:100%，跟随Banner高度 */
     height: 100%;
   }
   

   由于.banner-area已经有relative类，绝对定位的遮罩层会相对于Banner容器定位，不会超出范围。

2. 优化Banner高度设置方式
   移除Banner和.overlay-bg上的内联style="height:150px;"，改为给该页面的body添加专属类（如user-page），在CSS中统一设置：

   .user-page .banner-area {
     height: 150px;
   }
   

   这种方式更符合样式分离原则，避免内联样式冲突。

3. 修正HTML无效语法
   将header标签的id="header" id="home"改为仅保留一个id，比如id="header"，同一个元素不能有重复的id属性。

4. 确认导航栏层级
   导航栏已设置z-index:997，只要遮罩层范围被限制，这个层级足以保证导航栏在上方，不会被遮挡。

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