根本原因是z-index层级冲突及层叠上下文隔离：.dropdown-menu默认1000，低于.navbar（1030）和.modal（1050）；需用更具体选择器如.navbar .dropdown-menu设z-index为1060并确保父容器有position:relative，同时排查transform/opacity等触发新层叠上下文的属性，必要时用boundary:'window'将菜单挂载到body下。
下拉菜单被 navbar 或模态框盖住怎么办
根本原因是 z-index 层级冲突：默认 .dropdown-menu 是 1000，而 .navbar（固定定位时）常为 1030，.modal 是 1050，菜单一展开就被压在底下。
- 别只改
z-index: 9999——后续加tooltip（默认 1080）或toast又得重调 - 用更具体的选择器覆盖，比如
.navbar .dropdown-menu或.modal .dropdown-menu，避免全局污染 - 必须同时加
position: relative到父容器（如.dropdown），否则z-index不生效 - 检查是否漏了
data-bs-toggle="dropdown"——没这个属性，Bootstrap 根本不初始化下拉，更别说层级
为什么改了 z-index 还是被遮？真凶常是层叠上下文
当 .dropdown 的父元素有 transform、opacity < 1、will-change 或 isolation: isolate，就会创建新层叠上下文，此时 z-index 只在该局部范围内起作用，跟页面整体无关。
- 优先移除父级的
transform（比如把translateY()换成top + position: relative） - 实在不行，在触发元素上加
style="transform: none !important;"临时救急 - Bootstrap 5.2+ 支持
boundary: 'window'，JS 初始化时传进去，让菜单挂到<body>下：new bootstrap.Dropdown(el, { boundary: 'window' })
多级下拉菜单的 z-index 怎么设才不打架
二级菜单不是自动比一级高——它默认也用 1000，结果和一级菜单同层，视觉上“消失”或错位。
- 查父级的 computed
z-index（用 DevTools 看），子菜单至少 +1，比如父级是 1000，二级就设z-index: 1001 - 不要给所有
.dropdown-menu统一设高值，而是按容器上下文分级写，例如：.navbar .dropdown .dropdown-menu、.modal .dropdown .dropdown-menu - 如果父容器（如
.navbar-collapse）用了transform动画，二级菜单的z-index只在折叠区域内部生效，必须把值提到同级或更高层
移动端下拉菜单错位还遮不住？结构比样式更关键
小屏下 .navbar-collapse.show 展开时，如果 .dropdown 被包在自定义 <div> 里，flex 上下文就断了，z-index 和对齐都失效。
- 确保所有导航相关元素（包括右对齐的
.dropdown）都是<div class="collapse navbar-collapse">的**直接子元素** - 别给
.navbar-collapse加text-center或justify-content-start——它默认就是flex-start，加了反而覆盖ms-auto导致右对齐失效 - 确认
.dropdown-menu是.dropdown的**直接子元素**，中间不能插<div>或其他 wrapper
z-index 和 transform 属性，比盲目加 !important 有效得多。 
