Popover定位不准的根本原因是Popper.js首次计算时受父容器transform/overflow/position影响导致坐标系错误；须同时设置container: 'body'和popperConfig禁用adaptive与flip，再通过.popover-{placement}类微调。
Popover定位不准的根本原因不是CSS写错
Popper.js在首次计算时拿不到准确尺寸，比如触发元素父容器有transform、overflow: hidden或position: relative，坐标系就乱了。你看到的“飘走”“箭头不对齐”“被裁一半”，90%是这个原因，不是.popover的top/left没调对。
第一步必须加container: 'body'
默认情况下Popover会插到触发元素的parentNode里，一旦父级是.modal、.card或table td，定位立刻失效。强制挂到body下是最稳解法：
- HTML写法：
data-bs-container="body" - JS初始化：
new bootstrap.Popover(el, { container: 'body' }) - 验证是否生效：打开DevTools，确认
.popover元素确实在<body>直系子节点下，而不是嵌套在干扰容器里
第二步用popperConfig修正计算逻辑
只设placement: 'bottom'不够，得告诉Popper别被父容器带偏：
- 禁用因
transform导致的坐标系污染：{ popperConfig: { modifiers: [{ name: 'computeStyles', options: { adaptive: false } }] } } - 防止自动fallback（比如设了
bottom却跳到top）：{ modifiers: [{ name: 'flip', enabled: false }] }（慎用，确保空间足够） - 内容异步加载后手动刷新位置：
element.addEventListener('shown.bs.popover', () => popover.update())
微调只能靠.popover.{placement}类+margin
top/left是Popper动态写的内联样式，每次重定位都会刷掉，硬加!important没用。唯一可靠方式是：
- 确认
container: 'body'已生效，否则钩子类（如.popover-bottom）根本不会加到.popover上 - 用对应类微调：
.popover-bottom { margin-top: -12px; }（上移）、.popover-right { margin-left: -8px; }（左移） - 箭头单独调：
.popover-bottom .popover-arrow { margin-top: -4px; }，但前提是类名正确——如果fallback成top，类名就变成.popover-top，得同步改CSS
container和popperConfig必须配对使用，单改一个大概率白忙。尤其当触发元素在滚动区域、fixed定位容器或动态插入的DOM中时，漏掉任意一环，偏移就会回来。 
