真正卡住下拉菜单的是层叠上下文未建立，而非z-index值小；需为父容器（如.accordion-item）设position:relative以创建独立层叠上下文，并合理设置z-index顺序。
直接给 .dropdown-menu 加高 z-index 通常无效——真正卡住你的是层叠上下文没建好，不是数值不够大。
为什么改了 z-index 还被遮挡
根本原因不是 z-index 值太小，而是它的父容器没创建独立层叠上下文。比如下拉菜单嵌在 .accordion-item 或 .card 里时，这些容器默认是 position: static，导致子元素的 z-index 全部相对于整个页面计算。后渲染的兄弟元素（如下方的 .accordion-collapse）自然盖住上方弹出的菜单。
- 用浏览器开发者工具选中
.dropdown-menu，检查其computed position和z-index，再往上逐级看父元素有没有position: relative/absolute/fixed/sticky - 注意“伪定位”陷阱：父元素有
transform、opacity 、<code>will-change或filter，也会悄悄创建新层叠上下文，让z-index失效 -
z-index只对position不为static的元素起作用，这点必须确认
修复 .accordion-item 内下拉被遮挡
这是最典型的场景：手风琴展开后，上面一项的下拉菜单被下面一项的面板内容挡住。关键不是调菜单本身，而是给每个 .accordion-item 显式建立层叠顺序。
- 必须加
position: relative到.accordion-item，否则z-index是摆设 - 用
:first-child或:nth-child()控制顺序：.accordion-item:first-child { z-index: 10; }，后面项设为z-index: auto或递减值（如 9、8） - 务必限定作用域，例如写成
.my-accordion .accordion-item，避免影响其他 Accordion 实例 - 不要全局覆盖
.dropdown-menu { z-index: 9999; }——它解决不了层叠上下文缺失的问题
修复 .navbar 或 fixed 容器内下拉被压
导航栏固定定位时，.navbar 默认 z-index: 1030，而 .dropdown-menu 是 1000，所以一展开就被自己父容器盖住。
- 用更具体的选择器覆盖，例如：
.navbar .dropdown-menu { z-index: 1060; } - 确保该规则在 Bootstrap CSS 之后加载（检查
<link>顺序或临时用!important验证） - 如果父容器用了
transform（比如某些动画库或自定义滚动效果），优先移除；不行就加boundary: 'window'初始化下拉：new bootstrap.Dropdown(element, { boundary: 'window' }); - Bootstrap 5.3 的默认变量值：
$zindex-dropdown: 1000，$zindex-fixed: 1030，$zindex-modal: 1050——心里有数，别乱堆魔数
最容易被忽略的一点：层叠上下文不是靠“加高 z-index”就能突破的，它由祖先元素的渲染属性决定。哪怕你把 .dropdown-menu 的 z-index 设成 9999，只要它最近那个带 transform 的父容器没被处理，它就永远困在那个局部上下文里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
