Bootstrap移动端导航栏点击汉堡菜单后显示在组件下层问题求助

问题根因 #

z-index仅在同一个层叠上下文中生效，你给移动端导航栏设置的高z-index被限制在父级<header id="header">的层叠上下文内，而你页面其他模块（轮播、内容区块等）的z-index高于header设置的997，就会出现导航被遮挡的情况。

解决方案 #

1. 提升header父级的层级 #

直接修改#header的z-index值，确保它的层级高于所有页面内容模块：

#header {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: grayscale(0) contrast(3) blur(5px);
  transition: all 0.5s;
  z-index: 99999; /* 替换原有的997，直接提升父级header的整体层级 */
  padding: 15px 0;
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
}

2. 修正CSS语法错误 #

你现有代码中max-width: 480px的媒体查询块未正确闭合，导致后续样式优先级异常，修正后代码如下：

@media (max-width: 480px) {
  .header-social-links {
    padding: 0 15px 0 0;
    border-left: 0;
  }

  #header a .ActLogo {
    display: none;
    width: 40px;
    height: 40px;
  }
  #header .logo a {
    color: #E64238;
  }
  
  #header .logo a span {
    color: #2C3380;
  }
} /* 补充这里缺失的闭合大括号，原代码误将1200px的媒体查询包裹在了480px查询内部 */

@media (max-width: 1200px) {
  #header a .ActLogo {
    display: none;
  }
  .header-social-links {
    padding: 0 15px 0 0;
    border-left: 0;
  }
  #header .logo {
    font-size: 23px;
  }
  #header a .ActLogo{
    margin-top: -10px;
    margin-bottom: -10px;
  }
}

3. 可选优化 #

你当前把clientBt按钮放在<ul>标签内不符合HTML规范，建议将按钮移到<ul>外部，避免导航结构异常导致的样式问题。

完成上述修改后，移动端汉堡菜单弹出的导航栏就会正常显示在所有组件上层。

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