移动端Flyout菜单被custom-header-code遮挡的问题及修复咨询

问题根源 #

真实iPhone的Safari在堆叠上下文处理上和浏览器开发者工具模拟存在差异。你尝试调整z-index无效，大概率是以下原因：

• #custom-header-code.topheader在移动端未被正确隐藏，且带有position属性（如fixed/relative），自行创建了堆叠上下文
• 移动端菜单#mobile-container的父元素存在transform/perspective/filter这类属性，限制了子元素的z-index无法突破父层级

具体修复方案 #

方案1：彻底隐藏移动端的遮挡元素 #

如果该topheader在移动端无需显示，直接强制隐藏：

/* 移动端强制隐藏topheader */
@media (max-width: 767px) {
  #custom-header-code.topheader {
    display: none !important;
    position: static !important; /* 清除定位，避免残留堆叠上下文 */
  }
}

方案2：给菜单设置绝对最高层级 #

若topheader在移动端需要保留显示，给菜单及遮罩层设置远高于它的z-index：

/* 移动端菜单容器 */
#mobile-container {
  position: fixed !important; /* 必须为定位元素，z-index才会生效 */
  z-index: 99999 !important; /* 数值远大于topheader的层级 */
}

/* 同步提高遮罩层层级 */
#mobile-container-overlay {
  position: fixed !important;
  z-index: 99998 !important;
}

/* 压低topheader的层级 */
#custom-header-code.topheader {
  z-index: 999 !important;
}

方案3：破除父元素的堆叠上下文限制 #

如果前两个方案无效，检查菜单的父元素（如#gen-wrap或移动端header）是否存在transform/perspective/filter属性，这些属性会创建独立堆叠上下文，导致子元素z-index无法突破。直接清除：

/* 移除父元素的堆叠上下文属性 */
.gen-wrap.wrapper, .mobile-header {
  transform: none !important;
  perspective: none !important;
  filter: none !important;
}

验证注意事项 #

• 必须用真实iPhone测试，不要仅依赖浏览器模拟环境
• 若使用缓存插件，需先清除网站缓存再测试

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