当 Bootstrap 下拉菜单（Dropdown）嵌套在手风琴（Accordion）内时，由于父级 .accordion-item 默认无定位上下文且堆叠顺序相同，导致上方项的下拉菜单被下方项的面板内容遮挡；本文提供简洁可靠的 CSS 修复方案。

当 bootstrap 下拉菜单（dropdown）嵌套在手风琴（accordion）内时，由于父级 `.accordion-item` 默认无定位上下文且堆叠顺序相同，导致上方项的下拉菜单被下方项的面板内容遮挡；本文提供简洁可靠的 css 修复方案。

在 Bootstrap 5+ 中，

的显示依赖于其最近的已定位祖先元素（即 position 不为 static 的父级）来建立局部层叠上下文（stacking context）。而默认情况下，.accordion-item 使用 position: static（即无定位），其子元素（包括下拉菜单）的 z-index 将相对于整个文档根层叠上下文进行计算。由于所有 .accordion-item 具有相同的默认堆叠层级，后渲染的 .accordion-item（如第二个）会自然覆盖前一个的浮动内容（如下拉菜单），造成视觉遮挡。

关键误区在于：直接给 .dropdown-menu 或按钮设置高 z-index 是无效的——因为它们的祖先 .accordion-item 未创建独立层叠上下文，z-index 不起作用。

✅ 正确解法是为每个 .accordion-item 显式声明 position: relative 并赋予递增的 z-index，使其成为独立层叠容器，并控制整体顺序：

.accordion-item {
  position: relative;
}
.accordion-item:nth-child(1) { z-index: 3; }
.accordion-item:nth-child(2) { z-index: 2; }
.accordion-item:nth-child(3) { z-index: 1; }
/* 依此类推 —— 越靠前的项，z-index 越高 */

更简洁通用的写法（推荐）：

.accordion-item {
  position: relative;
}
.accordion-item:first-child {
  z-index: 10;
}
.accordion-item:not(:first-child) {
  z-index: auto; /* 或显式设为更低值，如 1 */
}

⚠️ 注意事项：

• 不要仅依赖 z-index 而忽略 position：z-index 仅对 position 为 relative、absolute、fixed 或 sticky 的元素生效；
• 避免全局污染：该规则应限定在具体手风琴容器内（例如加前缀 .my-server-accordion .accordion-item），防止影响其他 Accordion 实例；
• 响应式兼容性：此方案在 Chrome、Firefox、Edge 及 Safari 中均稳定有效，无需 JavaScript 干预；
• 与 Collapse 动画协同：z-index 仅控制静态堆叠，不影响 Bootstrap 内置的 collapse 过渡动画，可放心使用。

? 进阶提示：若手风琴项动态增删（如通过 JS 渲染），建议改用 CSS :nth-of-type() 或通过 JS 在插入时动态添加 data-zindex 属性并配合 CSS 属性选择器，确保堆叠序始终正确。

综上，问题本质是层叠上下文缺失而非下拉菜单自身样式错误。通过两行关键 CSS（position: relative + 有序 z-index），即可彻底解决下拉菜单被相邻 Accordion 项遮挡的常见布局难题。