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 只在该局部生效。
- 常见诱因：Bootstrap 模态框内嵌的
.card-body、.row或自定义容器加了overflow: hidden或transform: translateZ(0) - 直接后果：Popover 内容被裁剪，或即使设了
z-index: 9999也压不过同级的.modal-backdrop - 验证方式：临时移除父容器的
transform、opacity、overflow等属性，看是否恢复显示
必须用 container: 'body' 隔离干扰
Popover 默认 append 到触发元素的 parentNode，一旦该节点带干扰样式，Popper.js 的定位和层级就全乱了。统一挂到 body 下是最稳解法。
- HTML 中写：
data-bs-container="body" - JS 初始化时传：
new bootstrap.Popover(el, { container: 'body' }) - 别用
data-bs-container="body"+placement="auto"组合——auto已废弃，且只做单次计算 - 挂到
body后，记得同步调整popperConfig，否则箭头可能偏移：{ modifiers: [{ name: 'computeStyles', options: { adaptive: false } }] }
z-index 必须对齐 Bootstrap 变量体系
硬写 z-index: 9999 !important 会破坏整个 UI 层级秩序，比如让 Popover 盖住下拉菜单（$zindex-dropdown: 1000）或遮挡模态框标题（$zindex-modal-header: 1051）。
- Bootstrap 5 默认：
$zindex-popover: 1070（高于$zindex-modal: 1050，低于$zindex-toast: 1080） - 若用 Sass：重定义变量
$zindex-popover: $zindex-modal + 20 - 若无法改源码：用选择器权重覆盖，例如：
.modal .popover { z-index: calc(#{$zindex-modal} + 20) !important; } - 注意：不要在
.popover-body或.popover-header上设position: relative，否则子元素 z-index 失效
真正难处理的不是数值大小，而是 DOM 挂载位置和层叠上下文的隐式创建——哪怕只多一个 opacity: .99，就足以让整个 Popover 脱离预期层级。调试时优先看 computed layout，而不是猛加 z-index。
