下拉菜单被遮挡主因是父容器触发新层叠上下文，使z-index失效；应优先提升最近有定位的祖先容器z-index，而非仅调.dropdown-menu；bootstrap 5中需注意.navbar(1000)、.modal(1050)等层级关系。
下拉菜单被遮挡是因为 z-index 层级不够
Bootstrap 的 .dropdown-menu 默认 z-index 是 1000，看着挺高，但一旦父容器（比如导航栏、卡片、模态框）设置了 transform、filter 或 will-change，就会触发新的层叠上下文（stacking context），导致子元素的 z-index 只在该上下文内生效——哪怕设成 9999 也没用。
常见触发场景包括：.navbar-fixed-top（旧版）、.card 套了 transform: translateY()、用了 backdrop-filter 的玻璃态导航栏。
- 检查被遮挡区域的父级是否创建了新层叠上下文：用浏览器开发者工具选中遮挡它的元素，看 computed 样式里有没有
transform、opacity 、<code>filter等属性 - 不要只改
.dropdown-menu的z-index，优先提升它**最近的、有定位的祖先容器**的z-index - 如果必须改下拉菜单本身，Bootstrap 5 要覆盖
.dropdown-menu的z-index，且确保它所在的层叠上下文足够“高”——比如给.navbar加z-index: 1050
Bootstrap 4 和 5 的 z-index 值不一致
Bootstrap 4 中 $zindex-dropdown 是 1000，而 Bootstrap 5 改为 1000，但配套的 .navbar 是 1000，.modal-backdrop 是 1040，.modal 是 1050。如果你混用组件（比如把下拉菜单放进 .modal），默认就会被盖住。
- 查你用的 Bootstrap 版本：运行
console.log(bootstrap)或看node_modules/bootstrap/scss/_variables.scss - Bootstrap 5 推荐用 SCSS 变量重定义：在引入 Bootstrap 前设置
$zindex-dropdown: 1060，避免全局 CSS 覆盖失效 - 纯 CSS 方案慎用
!important，它会破坏后续所有 z-index 调整逻辑，尤其在动态模态框嵌套时更难调试
下拉菜单在固定定位导航栏里错位还被遮挡
这是最典型的复合问题：导航栏用 position: fixed，下拉菜单相对其父 .dropdown 定位，但父级没脱离文档流，导致计算位置出错 + 层级被压。
- 确保
.dropdown容器本身有position: relative（Bootstrap 默认有，但自定义封装时容易漏） - 如果导航栏用了
top: 0+z-index: 1030，那下拉菜单至少得设z-index: 1031，且不能让它的父级（比如.nav-item）意外创建层叠上下文 - 避免在
.dropdown-toggle上加transform或filter—— 这会让整个下拉菜单降级到该按钮的局部上下文中
用 JavaScript 动态调整 z-index 很危险
有人写脚本监听点击，在展开时临时给 .dropdown-menu 加 style.zIndex = '9999'，看似有效，实则埋雷。
- 多个下拉菜单同时打开时，z-index 会互相覆盖，后开的永远在最上，无法按需控制层级优先级
- 和 Popper.js（Bootstrap 5 下拉依赖它）的定位逻辑冲突，可能导致位置偏移或闪烁
- 更好的做法是静态预设好层级关系：比如
.navbar→.dropdown→.dropdown-menu各自对应 1030 → 1035 → 1040
真正难的不是调数字，而是识别哪一层悄悄新建了 stacking context——这往往藏在一行 opacity: 0.99 或一个未声明的 will-change 里。
