直接给 .dropdown-menu 加高 z-index 无效的根本原因是父容器未创建层叠上下文，需为 .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的 computedposition和z-index，再往上逐级看父元素有没有position: relative/absolute/fixed/sticky - 常见“伪定位”陷阱：父元素有
transform、opacity 、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 之后加载（检查
顺序或使用!important仅作临时验证） - 如果父容器用了
transform（比如某些动画库或自定义滚动效果），优先移除；不行就加boundary: 'window'初始化下拉：
new bootstrap.Dropdown(element, { boundary: 'window' });
- Bootstrap 5.3 的默认变量值：
$zindex-dropdown: 1000，$zindex-fixed: 1030，$zindex-modal: 1050——心里有数，别乱设魔数
bootstrap-select 等第三方下拉组件遮挡
这类封装组件往往把下拉列表插入到触发元素附近，而不是挂到 底下，极易被父容器裁剪或遮挡。
- 最简单有效的方式是用
data-container="body"属性强制挂载位置：
<select class="selectpicker" data-container="body"></select>
- 如果项目用了 Vue/React，注意组件是否支持 portal 模式；不支持就手动用
createPortal或teleport把弹出层移到body下 - 避免在触发按钮上加
transform或will-change，它们会截断弹出层的渲染范围
真正麻烦的从来不是 z-index 数值本身，而是谁在管这个“层”——没建对上下文，调再多次 9999 都白搭。每次遮挡，先打开开发者工具看 computed styles，盯住 position 和 transform 这两个字段，比瞎试 z-index 快十倍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
