下拉菜单被遮挡的核心原因是父容器意外创建了层叠上下文，导致子菜单无法突破局部层级；需检查父元素是否设置了触发层叠上下文的属性组合，并确保其z-index为auto，同时为菜单设置position: absolute和足够高的z-index。
下拉菜单被遮挡，核心原因往往不是 z-index 没设够，而是父容器“悄悄”创建了新的层叠上下文（stacking context），把子菜单锁在了局部层级里——即使你给菜单本身设置了很高的 z-index，它也只在父级的“小房间”里最高，出不去。
检查并避免父级意外创建层叠上下文
以下 CSS 属性一旦出现在下拉菜单的**任意一个父元素**上（尤其是直接父级），就会触发新的层叠上下文：
- position: relative / absolute / fixed / sticky + 同时设置了 z-index（非 auto）
- opacity 小于 1（如 opacity: 0.99）
- transform（哪怕只是 transform: translateZ(0) 或 transform: scale(1)）
- filter（如 filter: blur(0)）
- will-change（如 will-change: transform）
- isolation: isolate
✅ 解决办法：定位下拉菜单的直接父容器（比如 .dropdown），确认它没有上述组合。如果必须用 position: relative（常见于定位下拉箭头或触发按钮），请确保它的 z-index: auto（默认值），不要显式写 z-index: 0 或其它数字。
正确设置菜单自身的层叠顺序
下拉菜单（如 .dropdown-menu）应满足：
立即学习“前端免费学习笔记（深入）”；
- 有明确的 position: absolute（或 fixed）
- 设置足够高的 z-index（如
z-index: 1000） - 确保它不被父级层叠上下文“截断”——即它的父级不能是上述触发者
⚠️ 注意：z-index 只对 position 值为 relative、absolute、fixed 或 sticky 的元素生效，普通 div 设了也没用。
全局层叠策略建议（避免反复踩坑）
在项目根部或公共样式中定义清晰的 z-index 级别，例如：
.z-nav { z-index: 100; }<br>.z-dropdown { z-index: 1000; }<br>.z-modal { z-index: 2000; }<br>.z-toast { z-index: 3000; }
然后统一在菜单上写 class="z-dropdown"，而非零散写数字。这样既易维护，也减少冲突。
基本上就这些——重点不在“加高 z-index”，而在于“打通层级通道”。先查父级，再调菜单，问题通常就解了。
