根本原因是父容器未创建层叠上下文，需为.accordion-item等父元素设position: relative并合理设置z-index顺序，或用data-container="body"将下拉挂载到body下。
直接给 .dropdown-menu 加高 z-index 通常无效——真正卡住你的是层叠上下文没建好，不是数值不够大。
为什么改了 z-index 还被遮挡
根本原因不是 z-index 值太小，而是它的父容器没创建独立层叠上下文。比如下拉菜单嵌在 .accordion-item 或 .card 里时，这些容器默认是 position: static，导致子元素的 z-index 全部相对于整个页面计算。后渲染的兄弟元素（如下方的 .accordion-collapse）自然盖住上方弹出的菜单。
- 用浏览器开发者工具选中
.dropdown-menu，看 computed 的position是否为absolute，再往上逐级检查父元素有没有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' }); - 避免在
.dropdown-toggle上加transform或filter——这会让整个下拉菜单降级到该按钮的局部上下文中
别忽略 Bootstrap 版本和层级设计
Bootstrap 5.3 的默认值是：$zindex-dropdown: 1000、$zindex-fixed: 1030、$zindex-modal: 1050、$zindex-toast: 1090。硬塞 9999 只会让后续加个 tooltip 或 popover 又得重调。
- 如果你用 SCSS 编译，应在引入 Bootstrap 前重定义
$zindex-dropdown，而不是靠 CSS 覆盖 - 纯 CSS 方案慎用
!important，它会破坏后续所有z-index调整逻辑，尤其在动态模态框嵌套时更难调试 - 动态插入的菜单（如 AJAX 加载）需手动初始化：
new bootstrap.Dropdown(element) - 检查是否误将模态框或下拉菜单挂载在非
body下的position: relative容器中——这会重置整个层叠上下文
