Popover 被父级 overflow: hidden 截断的直接原因是浏览器渲染规则强制裁剪超出边界的绝对定位内容，最通用解法是通过 data-bs-container="body" 将其挂载到 body 下脱离干扰源。
Popover 被父级 overflow: hidden 截断的直接原因
不是 z-index 不够高，也不是 position 写错了——而是浏览器渲染规则：只要任意祖先元素设置了 overflow: hidden（或 auto、scroll），所有超出其边界的内容（包括 position: absolute 的 popover）都会被强制裁剪，无论层级多高。
常见触发场景：.modal-body 里嵌了 .card .card-body，而后者自带 overflow: hidden；或者你在仪表盘卡片上加 popover，但卡片容器本身设了 overflow: hidden 清浮动。
data-bs-container="body" 是最通用的解法
Bootstrap 5 默认把 popover DOM 插入到触发元素的父节点里，一旦父节点有 overflow: hidden 或 transform，Popper.js 的坐标系就乱了，导致定位偏移+内容被裁。
把 popover 挂到 <body> 下，彻底脱离干扰源：
立即学习“前端免费学习笔记（深入）”；
- HTML 写法：
<button data-bs-toggle="popover" data-bs-container="body" ...> - JS 初始化：
new bootstrap.Popover(el, { container: 'body' }) - 注意：
container: 'body'必须配合placement显式指定方向（如bottom），别依赖auto—— 它只算一次，且新版已废弃auto bottom这类写法
原生 HTML popover 属性怎么绕过 overflow: hidden
原生 <div popover> 不走 Popper.js，但同样受祖先 overflow: hidden 影响。它没有 container 选项，所以得靠 DOM 位置控制：
- 目标元素（带
popover属性的<div>）必须挂到<body>直接子级，不能嵌在任何overflow: hidden容器里 - 初始化必须调用
.showPopover()，否则popovertarget不生效（纯静态 HTML 不行） - 如果无法移动 DOM，可用
position: fixed+getBoundingClientRect()手动定位，但需监听滚动/缩放重算坐标
临时绕过但不推荐的视觉 hack
当完全无法改父级样式或 DOM 结构（比如 Chrome 插件注入），可尝试：
- 给 popover 元素加
position: fixed和精确top/left（基于getBoundingClientRect()计算） - 配合
z-index: 9999和pointer-events: none（仅适用于纯展示、无需交互的浮层） - ⚠️ 这种方式不响应滚动、不支持键盘导航、打印时消失、a11y 支持差——只适合临时覆盖类场景
真正稳定的做法永远是：让 popover 的 DOM 节点脱离 overflow: hidden 的祖先链，而不是在视觉层打补丁。
