轮播图遮挡下拉菜单的根源是其容器创建了层叠上下文，导致菜单z-index失效；应通过data-container="body"或移dom至body解决，并确保菜单有不透明背景色。
为什么轮播图总把下拉菜单盖住
不是 z-index 没设够，而是轮播图容器（比如 .carousel 或 #hero-slider）大概率设置了 overflow: hidden + position: relative —— 这个组合会悄悄创建一个层叠上下文，把所有子元素（包括你后来弹出的 .dropdown-menu）锁死在里面。哪怕你给菜单写了 z-index: 9999，它也只能在轮播图这个“盒子”里堆高，根本出不去。
检查轮播图父容器是否触发了层叠上下文
打开开发者工具，选中下拉菜单，往上逐级看父元素的 computed 样式。重点关注以下任意一条成立的父级（尤其是直接包裹轮播图的容器）：
-
position是relative/absolute/fixed且z-index不是auto -
overflow是hidden、auto或scroll -
transform、filter、opacity 、<code>will-change等属性被启用
只要其中一项存在，该父级就已创建新层叠上下文——你的下拉菜单再怎么调 z-index 都白搭。
真正有效的修复方式：绕开截断，不硬刚
别试图在轮播图内部调高菜单层级，直接让菜单脱离那个“盒子”：
- 用 Bootstrap？加
data-container="body"到触发按钮上：<button class="dropdown-toggle" data-bs-toggle="dropdown" data-container="body"></button> - 手写菜单？把
.dropdown-menu的 DOM 移到底部，并确保它有position: absolute和足够高的z-index（如z-index: 1060） - 如果必须保留在原结构里，删掉轮播图父容器的
overflow: hidden，改用padding-bottom或min-height控制高度
别漏掉背景色这个隐形坑
即使层级通了，菜单还是“半透明”地透出轮播图内容？那大概率是 .dropdown-menu 缺少背景色：
- 确认它有
background-color（不能是transparent或未声明） - 避免用
rgba(0,0,0,0.9)这类带透明度的值——它会让底层内容隐约可见 - 优先用纯色：
background-color: #fff或background-color: hsl(0,0%,100%)
轮播图遮挡问题，本质是两层冲突：一层是层叠上下文的物理封锁，一层是视觉上的透明错觉。先破封锁，再填背景，缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
