移动端汉堡菜单打开后被div遮挡、链接无法点击问题求助

问题根因 #

层级遮挡由堆叠上下文配置错误导致，仅技能页复现的核心原因是技能页内容区域的堆叠优先级高于导航容器：

• 导航外层容器.nav-container、.Hnavbar未显式设置position属性与高优先级z-index，即使子菜单.nav-menu设置了z-index:3，也只在导航容器自身的堆叠上下文中生效，无法覆盖层级更高的下层内容
• .Hnavbar设置的overflow: hidden会裁剪超出父容器高度的展开菜单，也是可能的诱因

修复方案 #

1. 调整.nav-container样式，创建全局高优先级堆叠上下文：

.nav-container {
  width: 100vw;
  height: 80px;
  position: relative;
  z-index: 999;
}

2. 修改.Hnavbar样式，移除溢出裁剪规则：

.Hnavbar {
  align-items: center;
  width: 100%;
  margin: 0 auto;
  position: relative;
}

3. 若技能页内容区域有手动设置z-index，确保其数值低于999即可。

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