移动端菜单栏展开后显示在内容下方无法覆盖置顶问题求解决指导

核心问题原因 #

该问题属于移动端前端布局的常见场景，本质是*层叠上下文（stacking context）*和z-index属性配置错误导致菜单层级低于页面普通内容，按以下步骤排查即可解决： #

排查&修复步骤 #

• 第一步：给菜单容器配置基础层级规则
  z-index生效的前提是元素position属性不为默认的static，给菜单容器添加以下样式即可覆盖绝大多数场景：

/* 将类名替换为你的菜单实际类名即可 */
.mobile-menu {
  position: fixed; /* 固定定位适配全屏覆盖菜单需求，不需要全屏可替换为absolute */
  z-index: 999; /* 普通页面内容默认z-index为auto，999足够覆盖所有常规内容 */
  /* 保留原有其他样式配置 */
}

• 第二步：排查菜单父元素的层叠上下文限制
  如果配置上述样式后问题仍存在，基本都是父元素触发独立层叠上下文导致的：只要父元素设置了transform、opacity < 1、filter、will-change: transform/opacity、contain: layout/paint等属性，就会创建独立层叠上下文，此时子菜单的z-index仅在父元素内部生效，父元素本身层级低于页面内容的前提下，子菜单z-index设置再高也无法覆盖外层内容。
  修复方案二选一：
  1. 移除父元素上触发层叠上下文的相关属性
  2. 将菜单DOM节点直接迁移到<body>标签的直接子节点位置，脱离原有父容器的层级限制
• 第三步：排查其他固定定位元素的层级冲突
  如果页面存在固定在顶部的导航栏、悬浮按钮等元素，确认这些元素的z-index数值小于菜单的z-index即可。

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