下拉菜单被轮播图遮挡的根源是层叠上下文隔离而非z-index数值不足；轮播图容器因transform/filter等属性隐式创建新层叠上下文，使菜单z-index失效；需将菜单移至body下、确保其有定位祖先和position+ z-index，移动端应弃用hover改用click触发。
下拉菜单被轮播图遮挡，根本不是 z-index 数值没设够，而是两者处于不同定位上下文或层叠上下文中，导致 z-index 失效。
轮播图常偷偷创建新层叠上下文
很多 CSS 轮播图（尤其是纯 CSS 实现的）会用 transform、perspective 或 filter 做动画或过渡效果。只要父容器设置了这些属性，就会隐式创建新的层叠上下文（stacking context），此时内部所有子元素的 z-index 都只在该上下文内生效——哪怕你给下拉菜单设了 z-index: 9999，它也压不过轮播图容器本身的层叠层级。
- 检查轮播图最外层容器是否含
transform: translateZ(0)、transform: scale(1)、filter: blur(0)等触发层叠上下文的样式 - 若确需这些效果，把下拉菜单 DOM 移出轮播图容器，挂到
下（如用document.body.appendChild(menuEl)） - 避免对轮播图容器设
z-index（哪怕是z-index: 1），否则它立刻成为层叠根，彻底锁死内部层级
下拉菜单必须有独立定位上下文
下拉菜单本身不设 position，或父容器是 position: static，z-index 就完全无效。常见错误是菜单直接插在导航栏里，但导航栏没设 position: relative，结果菜单相对 定位，又撞上轮播图的层叠上下文。
- 确保菜单的**最近已定位祖先**是明确的
position: relative元素（比如<nav class="navbar"></nav>） - 菜单自身必须设
position: absolute或position: fixed，且显式声明z-index（如z-index: 1000） - 不要依赖
position: sticky做下拉菜单容器——它不创建层叠上下文，但滚动时行为不稳定，且无法保证始终高于轮播图
移动端轮播图 + 悬停菜单的兼容陷阱
iOS Safari 对 position: fixed 和 z-index 的处理极不一致：键盘弹出时 fixed 元素可能错位；某些轮播图库强制用 transform: translate3d()，直接让整个组件脱离文档流并创建强层叠上下文。
- 移动端放弃
:hover触发下拉，改用click+ JS 切换aria-expanded和类名，再配合transition显隐 - 轮播图容器加
will-change: transform时务必同步测试菜单层级——这会加剧层叠上下文分裂 - 真要保底，给菜单加
position: fixed并用 JS 动态计算按钮位置（getBoundingClientRect()+window.scrollX/Y），绕过所有嵌套定位干扰
真正难的不是调大 z-index，而是确认菜单和轮播图是否在同一个层叠上下文中竞争——多数时候它们根本不在同一“战场”，强行调数值只是掩耳盗铃。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
