直接改 .dropdown-menu 的 z-index 无效，因 .navbar 创建了层叠上下文；须用更具体选择器（如 .navbar .dropdown-menu）设 z-index: 1060 并声明 position: relative，或移除父级 transform/filter/opacity 等触发上下文的属性。
导航栏层级太低，不是 z-index 数值本身小，而是 .navbar 创建了层叠上下文，把内部的 .dropdown-menu 关在里面——改子元素的 z-index 没用，得先破局。
为什么直接改 .dropdown-menu 的 z-index 无效
常见错误是写 .dropdown-menu { z-index: 9999; }，但浏览器计算时发现它的父级 .navbar 是 position: fixed + z-index: 1030，自动成了新的层叠上下文。子元素再高的 z-index（比如 1000）也只在 .navbar 内部生效，永远出不去。
- 用 Chrome DevTools 点开
.navbar，看 computed 样式里是否有transform、opacity: 0.99或filter——这些都会静默创建新层叠上下文 -
.dropdown-menu默认z-index: 1000，而.navbar默认是1030，数值差只是表象，根源是上下文隔离 - 全局覆盖
.dropdown-menu不仅无效，还会干扰其他场景（比如模态框里的下拉）
必须用更具体的选择器覆盖 z-index
Bootstrap 原生样式优先级高，单写 .dropdown-menu 会被覆盖。你得让选择器“压过它”：
- 推荐：
.navbar .dropdown-menu { z-index: 1060; position: relative; }——position: relative显式声明，避免父级没定位导致z-index失效 - 如果用了旧版类名：
.navbar-fixed-top .dropdown-menu - 若导航栏嵌在特定容器里：
.my-header .navbar .dropdown-menu，避免影响其他.navbar - 确保这条 CSS 在 Bootstrap 的 CSS 之后加载（
<link>顺序或单独<style>放页面底部）
父级有 transform 怎么办
很多动画库、滚动监听或自定义样式会给 .navbar 加 transform: translateY(0) 或 will-change: transform，这会彻底锁死层叠上下文，此时调 z-index 完全没反应。
- 首选：移除
.navbar上的transform、filter、opacity < 1——用top+position: relative替代位移动画 - 救急方案：JS 初始化下拉时指定
boundary: 'window'，让菜单挂到<body>下，脱离父级上下文：new bootstrap.Dropdown(element, { boundary: 'window' }); - 临时调试可加
style="transform: none !important;"到触发按钮上，但别留进生产代码
CDN 用户别碰 z-0～z-3 工具类
z-0 到 z-3 只对应 z-index: 0/100/200/300，远低于 .navbar 的 1030 和 .dropdown-menu 的 1000。给触发按钮加 class="z-3" 不会影响菜单显示层级。
- 真正要对齐 Bootstrap 层级体系，得用其语义化变量：
--bs-zindex-dropdown（5.3+）、--bs-zindex-fixed - 纯 CSS 覆盖时，数值建议设为
1060（比.navbar高 30），预留空间给后续组件如.toast（默认1080） - 别用
!important硬顶——它会让后续所有 z-index 调整逻辑失控，尤其在嵌套模态框里
最常被忽略的是：改了 z-index 却忘了检查父容器是否已定位，以及是否意外触发了新层叠上下文。这两点不确认，再高的数值也是摆设。
