移动端菜单背景异常求助：菜单无法遮挡后方元素

DevOps 小满

2026-6-16

移动端菜单背景无法遮挡后方元素的解决方案

你的#headerPop菜单已设置白色背景，但仍能看到后方元素，核心原因是缺少z-index属性导致层级不足。fixed定位元素默认层级为auto，当页面中存在其他定位元素（如#body使用relative定位）时，菜单会被下方内容覆盖，从而出现穿透效果。

修复步骤

给#headerPop添加z-index属性，设置一个足够大的值，确保它的层级高于页面其他内容：

#headerPop {
  position: fixed;
  top: 10%;
  left: 0;
  height: 27%;
  width: 100%;
  text-align: center;
  background-color: white;
  visibility: hidden;
  z-index: 100; /* 新增这一行 */
}

同时，为了保证顶部导航栏(#header)始终在菜单上方，可以给它也添加z-index：

#header {
  position: fixed;
  left: 0;
  top: 0;
  height: 10vh;
  width: 100%;
  background-color: rgba(72, 188, 132, 0.425);
  z-index: 101; /* 新增这一行 */
}