react-burger-menu的z-index不生效，菜单弹出后搜索按钮仍可见

问题现象 #

• 基于react-burger-menu实现侧边汉堡菜单功能时，菜单弹出展示状态下，页面上的搜索按钮未被菜单正常遮挡，仍处于穿透可见状态
• 已完成的调试动作：先后给菜单关联的样式类设置z-index为1、100、10000三组数值，异常始终未解决
• 效果参照：
  • 菜单未打开时，仪表盘首页显示状态正常
  • 菜单弹出后，搜索按钮穿透显示的异常状态

当前已编写的菜单样式代码 #

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #FCFDFD;
  min-width: 160px;
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.25);
  z-index: 1;
  width: 250px;
  right: 0;
  top: 5;
  border-radius: 2px;
}

问题排查与解决方案 #

1. 先确认样式绑定的匹配性（最高概率原因）
   你反复调整z-index却没有效果，核心原因是当前修改的.dropdown-content类，根本没有作用到react-burger-menu组件实际渲染的根包装节点上。react-burger-menu的侧滑逻辑、层叠控制都挂在组件自动生成的根容器上（默认类名为.bm-menu-wrap），如果CSS规则没有匹配到这个真实存在的DOM节点，不管z-index设多少都不会生效。
   操作方式：打开浏览器开发者工具的元素面板，找到菜单弹出时的实际DOM节点，确认你写的样式类是否被正确应用到节点上；如果未匹配，要么通过组件提供的自定义类名props把你的样式类绑定到对应节点，要么直接给组件生成的真实根节点设置z-index。
2. 把z-index设置在正确的节点上
   z-index需要绑定在带有定位属性的组件根包装节点上，不要把值设置在菜单内部的内容元素上。同时要同步调整组件自带的全屏遮罩层（默认类名.bm-overlay）的z-index，保证遮罩和菜单根容器的层级高于页面其他元素。
3. 排查跨层叠上下文的干扰
   z-index只在同一层叠上下文内生效，如果搜索按钮所在的父节点被创建了独立层叠上下文（比如设置了transform、opacity<1、filter属性，或者父节点本身带position + z-index的组合规则），哪怕你给菜单设置了极高的z-index值，只要菜单所在的层叠上下文整体优先级低于搜索按钮的父级上下文，遮挡效果就会失效。
   操作方式：通过开发者工具选中搜索按钮，沿DOM树向上遍历，检查所有父节点的层叠上下文属性，找到抬升搜索按钮层级的规则后，调整对应元素的属性或z-index，让菜单根节点所在的层叠上下文整体位于更上层。
4. 修正无效的CSS语法
   当前代码中的top: 5属于无效CSS规则，长度值缺少浏览器可识别的单位，会被直接忽略，需要修改为top: 5px才能正常生效。

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