移动端汉堡菜单遮挡超链接致无法点击的CSS解决方案咨询

问题描述 #

• 移动端汉堡菜单关闭状态下覆盖页面超链接，导致链接无法点击；为.nav-bar（导航栏网格容器）或.menuNav（汉堡菜单容器）设置display: none后，链接可恢复正常点击。
• 手动调整z-index属性未生效，无需遍历所有页面元素抬高内容层级，可通过更简便的方式修复。
• 问题效果参考：移动端菜单关闭状态（粉色链接因菜单遮挡无法点击）

原有问题样式代码 #

html {
  overflow-x: initial !important;
}
/*nav-bar-desktop*/
.mainNav {
  display: none;
}
/*nav-bar-mobile*/
.page-header {
  background: #322759;
  width: 100%;
  height: 20%;
  position: fixed;
  .logo {
    position: fixed;
    width: 35%;
    margin-top: -28px;
    margin-left: -40px;
  }

  .nav-bar {
    z-index: -1;
  }

  .page-header-links {
    z-index: 0;
  }

}
.nav-bar-mobile {
  position: relative;
  display: block;
}
.nav-bar-mobile button {
  position: fixed;
  right: 40px;
  top: 40px;
  z-index: 2;
  cursor: pointer;
  background: transparent;
  border: none;
}
.menuNav {
  overflow-y: none;
  list-style: none;
  top: 0;
  right: 0;
  bottom: 0;
  height: 100vh;
  width: 0;
  overflow: hidden;
  max-width: 414px;
  text-align: center;
}
.menuNav.showMenu {
  width: 100%;
  right: 0px;
  height: 100vh;
  padding-top: 200px;
  position: fixed;
  background: #322759;
  .mobile-nav-monster {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 65vw;
    justify-content: flex-start;
  }
}
.nav-tabs {
  padding: 20px;
  border-bottom: none !important;
  text-decoration: none;
  color: #D9D8D8;
}
.menuNav:link {
  color: #D9D8D8;
}
.menuNav:visited {
  color: #D9D8D8;
}
.menuNav:active {
  color: #E87DA6;
}
.hamburger-close {
  color: #FFFFFF;
  width: 40px;
  height: 40px;
  margin-top: 10px;
  transform: scale(1.7);
}
.hamburger-open {
  color: #FFFFFF;
  width: 40px;
  height: 40px;
  margin-top: 10px;
  transform: scale(1.7);
}

问题根因 #

z-index调整无效的核心原因：关闭状态下的.menuNav仅宽度被设为0，但元素本身仍为100vh高度、定位在视口上层，透明区域覆盖在页面内容上方拦截了所有触摸/点击事件，和下层元素的z-index高低无关。

修复方案 #

两种方案任选其一即可，不需要修改其他页面元素的层级：

方案1（推荐）：控制关闭状态的可见性 #

给默认关闭状态的.menuNav添加visibility: hidden属性，让元素完全脱离交互层；菜单展开时再恢复可见，还可以搭配过渡属性实现平滑的展开收起动画：

.menuNav {
  /* 原有属性保留 */
  overflow-y: none;
  list-style: none;
  top: 0;
  right: 0;
  bottom: 0;
  height: 100vh;
  width: 0;
  overflow: hidden;
  max-width: 414px;
  text-align: center;
  /* 新增属性 */
  visibility: hidden;
  transition: all 0.3s ease;
}
.menuNav.showMenu {
  /* 原有属性保留 */
  width: 100%;
  right: 0px;
  height: 100vh;
  padding-top: 200px;
  position: fixed;
  background: #322759;
  /* 新增属性 */
  visibility: visible;
  .mobile-nav-monster {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 65vw;
    justify-content: flex-start;
  }
}

方案2：关闭状态禁用指针事件 #

如果不需要动画，也可以通过pointer-events属性让点击事件直接穿透关闭状态的菜单，打到下层的页面内容上：

.menuNav {
  /* 原有属性保留 */
  /* 新增：关闭状态不响应任何指针事件 */
  pointer-events: none;
}
.menuNav.showMenu {
  /* 原有属性保留 */
  /* 新增：展开时恢复指针事件响应 */
  pointer-events: auto;
}

额外注意：原有代码中.page-header为固定定位，内部子元素.nav-bar设置了z-index: -1，如果后续出现头部内容被页面主体遮挡的问题，直接给.page-header本身设置正z-index值（如z-index: 99）即可，不要给固定定位元素的子元素设置负z-index，避免子元素被父级背景遮挡。

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