如何修复Bootstrap Popover层级冲突

Popover 被遮盖的根源是层叠上下文隔离而非 z-index 过小；需检查父容器是否创建独立层叠上下文（如 transform、opacity、overflow 等），改用 container: 'body' 挂载并按 Bootstrap z-index 体系设置层级。

Popover 被模态框、下拉菜单或第三方弹窗盖住，不是 z-index 写小了，而是它和遮盖者不在同一个层叠上下文里——调数值没用。

检查是否被父容器创建了独立层叠上下文

打开 Chrome DevTools → Elements 面板选中 .popover 元素 → 右侧 Styles 标签页拉到底部 «Layout» 区域，看是否标记为 “Stacking context”。如果标了，说明它被包裹在某个触发新层叠上下文的父元素里（比如 .modal-body 有 transform、opacity: .99 或 position: relative），此时 z-index 只在该局部生效。

1. 常见诱因：Bootstrap 模态框内嵌的 .card-body、.row 或自定义容器加了 overflow: hidden 或 transform: translateZ(0)
2. 直接后果：Popover 内容被裁剪，或即使设了 z-index: 9999 也压不过同级的 .modal-backdrop
3. 验证方式：临时移除父容器的 transform、opacity、overflow 等属性，看是否恢复显示

必须用 container: 'body' 隔离干扰

Popover 默认 append 到触发元素的 parentNode，一旦该节点带干扰样式，Popper.js 的定位和层级就全乱了。统一挂到 body 下是最稳解法。

1. HTML 中写：data-bs-container="body"
2. JS 初始化时传：new bootstrap.Popover(el, { container: 'body' })
3. 别用 data-bs-container="body" + placement="auto" 组合——auto 已废弃，且只做单次计算
4. 挂到 body 后，记得同步调整 popperConfig，否则箭头可能偏移：{ modifiers: [{ name: 'computeStyles', options: { adaptive: false } }] }

z-index 必须对齐 Bootstrap 变量体系

硬写 z-index: 9999 !important 会破坏整个 UI 层级秩序，比如让 Popover 盖住下拉菜单（$zindex-dropdown: 1000）或遮挡模态框标题（$zindex-modal-header: 1051）。

1. Bootstrap 5 默认：$zindex-popover: 1070（高于 $zindex-modal: 1050，低于 $zindex-toast: 1080）
2. 若用 Sass：重定义变量 $zindex-popover: $zindex-modal + 20
3. 若无法改源码：用选择器权重覆盖，例如：.modal .popover { z-index: calc(#{$zindex-modal} + 20) !important; }
4. 注意：不要在 .popover-body 或 .popover-header 上设 position: relative，否则子元素 z-index 失效

真正难处理的不是数值大小，而是 DOM 挂载位置和层叠上下文的隐式创建——哪怕只多一个 opacity: .99，就足以让整个 Popover 脱离预期层级。调试时优先看 computed layout，而不是猛加 z-index。