下拉菜单被遮挡的根源是层叠上下文未正确建立，需为最近有定位的祖先容器（如.navbar、.accordion-item）设置position: relative并提升其z-index，而非仅调.dropdown-menu。
下拉菜单被下方内容遮挡，根本不是 z-index 数值低
直接给 .dropdown-menu 加 z-index: 9999 通常无效。真正卡住你的是层叠上下文（stacking context）没建好——它的父容器（比如 .navbar、.accordion-item 或某个 .card）默认是 position: static，导致子元素的 z-index 全部相对于整个页面计算。后渲染的兄弟块（如下方的 .accordion-collapse 或 .section）自然盖住弹出的菜单。
检查方式：打开浏览器开发者工具，选中遮挡它的元素，在 Computed 面板里看有没有 transform、opacity < 1、filter 或 will-change ——这些都会悄悄创建新层叠上下文，让 z-index 失效。
-
z-index只对position不为static的元素起作用，务必确认父级已设position: relative等 - 不要只改
.dropdown-menu，优先提升它**最近的、有定位的祖先容器**的z-index - 常见“伪定位”陷阱：父元素用了
transform（比如某些动画库或自定义滚动），会强制新建层叠上下文
导航栏内下拉菜单被自己父容器压住
.navbar 默认 z-index: 1030，而 .dropdown-menu 是 1000。展开时，菜单在父容器内部渲染，但层级低于父容器自身，结果被“自己盖住”。这不是 bug，是 Bootstrap 5 的层级设计逻辑。
修复要点：
- 用更具体的选择器覆盖：
.navbar .dropdown-menu { z-index: 1060; }（必须确保该 CSS 在 Bootstrap 原生样式之后加载） - 如果
.navbar上加了transform或backdrop-filter，优先移除；否则初始化下拉时传boundary: 'window'：new bootstrap.Dropdown(el, { boundary: 'window' }); - 避免在
.dropdown-toggle上加transform或filter——这会让整个下拉降级到按钮的局部上下文中
手风琴（Accordion）里下拉菜单被下方面板遮挡
这是最典型的复合问题：.accordion-item 默认无定位，所有项共享同一层叠上下文，后渲染的 .accordion-item 会覆盖前一个弹出的菜单。
正确做法不是调菜单本身，而是为每个 .accordion-item 显式建立独立层叠顺序：
- 必须加
position: relative到.accordion-item（否则z-index是摆设） - 用
:first-child控制顺序：.accordion-item:first-child { z-index: 10; }，其余设为z-index: auto或递减（如9、8） - 务必限定作用域，例如写成
.my-accordion .accordion-item，避免影响其他 Accordion 实例
折叠态（.navbar-collapse.show）下拉菜单错位或被截断
.navbar-collapse.show 的 max-height 是固定估算值（如 300px），不随真实内容高度变化。一旦含多行文字、图标或嵌套 .dropdown，实际高度就超了，overflow: hidden 直接切掉底部。
临时验证法：在 DevTools 中禁用 transition 后内容全显示 → 基本锁定是 max-height 不足。
- 稳妥方案：
.navbar-collapse.show { max-height: 120vh !important; }（vh适配大小屏，!important确保压过 Bootstrap 默认值） - 精简场景（仅 3–5 个链接）可按项估算：
max-height: 240px（每项约48px+ 余量） - 若仍错位，给
.dropdown-menu加position: static !important，让它随文档流撑高容器；或加属性data-bs-popper="static"禁用 Popper 定位
position: relative、哪一层该调 z-index，而不是盲目堆数值。层叠上下文一旦断裂，再大的 z-index 也只在局部生效。 
