移动端汉堡菜单div未展开仍遮挡页面元素致底部链接失效求解

核心排查逻辑 #

这类遮挡问题的本质是视觉不可见的元素没有移除点击拦截能力，常见触发场景：

• 菜单收起时仅用视觉类属性做隐藏：比如通过opacity: 0让容器透明、用transform: translateX(100%)把容器移出视口，这类操作不会让浏览器停止对该元素的点击事件拦截，哪怕完全看不到元素，它依然会浮在页面上层
• 汉堡菜单所属的固定导航容器尺寸异常：移动端导航一般是顶部通栏的固定定位结构，如果误把容器高度设为100vh、没有设置明确的高度值导致盒模型被撑满视口，哪怕容器本身背景透明，这个固定层也会从顶部延伸到页面底部，完全遮挡下方的可点击链接
• 收起态没有重置层叠优先级：给菜单容器设置了高于正文内容的z-index值（如999、1000这类高层常用数值），收起时没有降低优先级，导致元素层叠顺序始终在正文上方

可直接落地的修复方法 #

• 菜单完全收起时，给承载菜单的容器追加彻底隐藏的样式：.mobile-menu-container.is-collapsed { display: none; }，不要依赖透明、位移这类视觉隐藏方式做收起态
• 如果需要保留DOM结构实现展开过渡动画，就在收起态给容器追加pointer-events: none，明确让浏览器忽略该元素的所有点击拦截；等菜单正式展开后，再将属性改回pointer-events: auto恢复正常交互
• 修正固定导航容器的实际渲染尺寸：选中导航元素后在开发者工具的布局面板查看盒模型，若发现容器高度撑到了和视口等高，将高度修正为导航本身的实际尺寸（移动端导航常规高度在48px-64px区间）即可

快速验证技巧 #

修改前可以用开发者工具的元素选择器，直接点击页面底部无法正常点击的链接位置，如果选中的元素不是目标链接本身，而是汉堡菜单容器或它的父级导航，就说明已经定位到遮挡源，直接对应修改该元素样式即可。

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