真正起作用的是对齐bootstrap层级体系、控制层叠上下文并确保定位生效；z-0至z-3仅对应极低z-index值（0/100/200/300），远低于.dropdown-menu默认的1000，且z-index需配合position:relative等定位属性才生效，否则被忽略。
直接给元素加 z-3 或硬写 z-index: 9999 基本无效——真正起作用的是对齐 bootstrap 的层级体系、控制层叠上下文，以及确保定位生效。
为什么 z-0 到 z-3 类完全盖不住下拉菜单或模态框
这些实用类只对应 z-index: 0、1、2、3（部分版本是 0/100/200/300），而 .dropdown-menu 默认是 1000，.modal 是 1055，.toast 是 1090。你给一个按钮加 z-3，它照样被 .navbar（1030）压住。
- 必须搭配
position-relative等定位类才生效，否则z-index被忽略 - 哪怕加了定位，若父级有
transform、opacity: 0.99、filter或will-change，也会创建新层叠上下文，让子元素的z-index失效 -
z-4及以上类名根本不存在，别试
如何安全覆盖 .dropdown-menu 的 z-index
目标不是“堆高数值”，而是让它在正确的层叠上下文中高于父容器但低于模态框。Bootstrap 5.3 的默认值是 $zindex-dropdown: 1000、$zindex-fixed: 1030、$zindex-modal: 1055。
- 用更具体的选择器覆盖，例如：
.navbar .dropdown-menu { z-index: 1060; } - 确保该 CSS 在 Bootstrap 的 CSS 之后加载（检查
<link>顺序） - 同时给父容器（如
.dropdown或.nav-item）加position: relative，否则z-index不触发 - 如果父级用了
transform（比如动画库注入的），优先移除；不行就初始化下拉时设boundary: 'window'
父容器悄悄创建层叠上下文才是真凶
这是最常被跳过的环节：哪怕你写了 z-index: 9999，只要目标元素的某个父级满足以下任一条件，它的 z-index 就只在这个“小盒子”里有效：
- 父元素有
position: relative且z-index: 0（哪怕只是0） - 父元素用了
transform、opacity: 0.99、filter、will-change - 父元素是
.accordion-item或.card（默认position: static，但多个同级项会互相覆盖）
验证方法：Chrome DevTools → Elements → 找到该元素 → 右侧 Styles 标签页下方 Layout 区域，看有没有 “Stacking context” 提示。
模态框和手风琴内下拉的典型修复路径
这两类场景暴露的问题最集中：DOM 结构导致层叠上下文缺失或错位。
- 对于
.modal：必须挂载到document.body下，不能嵌套在 React/Vue 根容器或任意position: relative的 div 里；Vue 用<teleport to="body"></teleport>，React 用createPortal - 对于
.accordion-item内的下拉：不能只调.dropdown-menu，要给每个.accordion-item加position: relative，再用:nth-child()或递减z-index控制顺序（如第一个z-index: 3，第二个z-index: 2） - 所有方案都依赖一点：父容器已定位且未意外触发隔离上下文——这点比数值本身更重要
