本文详解 elementor 中导航菜单下拉项被首页 section 遮盖的常见原因（主要是层叠上下文与 z-index 冲突），提供可立即生效的 css 修复方案、调试步骤及避坑指南。
本文详解 elementor 中导航菜单下拉项被首页 section 遮盖的常见原因（主要是层叠上下文与 z-index 冲突），提供可立即生效的 css 修复方案、调试步骤及避坑指南。
在使用 Elementor 构建 WordPress 网站时，一个高频且令人困扰的问题是：导航栏的下拉子菜单（Dropdown Menu）在预览或前端页面中被紧随其后的第一个 Section（如 Hero 区域）裁剪或完全遮挡——而 Elementor 编辑器内却显示正常。这种“编辑器可见、前端不可见”的差异，往往源于 CSS 层叠上下文（stacking context）的意外创建，而非简单的 z-index 数值不足。
? 根本原因：隐式层叠上下文破坏了菜单层级
Elementor 默认为多数 Section 启用 overflow: hidden 或设置 background-attachment: fixed、transform、opacity 强制创建新的层叠上下文。一旦首节（Section）建立了独立的层叠上下文，其内部所有子元素（包括背景、容器、文字）都将被限制在此上下文中渲染——即使下拉菜单的 z-index: 9999 很高，也仅相对于该 Section 的上下文有效，无法“穿透”到全局层级覆盖 Header。
因此，单纯给 .sub-menu 增加 z-index（如 z-index: 9999）往往无效，除非确保其父级容器（如 .elementor-nav-menu 或 Header 区域）本身处于更高层级的上下文中。
✅ 推荐解决方案（按优先级执行）
1. 为导航菜单容器显式声明层叠上下文
在 Elementor → 自定义 CSS（或主题自定义器 → 额外 CSS）中添加以下代码：
/* 确保导航菜单父容器具有明确的定位与高 z-index */
.elementor-section .elementor-nav-menu,
.elementor-header .elementor-nav-menu {
position: relative;
z-index: 9999;
}
/* 强制子菜单脱离局部上下文，提升至全局顶层 */
.elementor-nav-menu .sub-menu,
.elementor-nav-menu .sub-menu .sub-menu {
position: absolute !important;
z-index: 99999 !important;
overflow: visible !important;
}⚠️ 注意：.elementor-section .elementor-nav-menu 适用于将菜单嵌入 Section 的场景；若菜单位于 Elementor Header 模板中，请改用 .elementor-header .elementor-nav-menu。可通过浏览器开发者工具（F12）右键检查菜单外层
