popover被父级overflow:hidden截断的根本原因是祖先元素形成裁剪边界，而非z-index不足；典型场景包括模态框内.card-body、选项卡容器等，可靠解法是移除overflow样式、下移overflow至内层容器或使用data-bs-container="body"挂载到body下。
Popover 被父级 overflow: hidden 截断的典型场景
不是 z-index 不够高，而是浏览器强制裁剪——只要 popover 的任意祖先元素（不一定是直接父级）设置了 overflow: hidden、overflow: auto 或 overflow: scroll，且 popover 使用 position: absolute 定位，它超出该祖先边界的部分就会被视觉抹除，无论 z-index 设成 9999 还是 999999。
常见触发位置包括：.modal-body 内嵌的 .card .card-body、选项卡容器 .tabs-container、自定义弹层外层包裹 div、甚至某些 UI 组件库默认加的样式类（如 ant-card-body 或 v-card__text）。
- Bootstrap 4/5 模态框中点击按钮弹出的 popover 显示不全，尤其靠近底部时被
.modal-footer“吃掉”一部分 - Vue + Element UI 的
el-popover在el-card内无法完整展开 - 手写
position: absolute+transform实现的悬浮提示，突然少了一半内容
检查和定位溢出源头的实操步骤
打开 DevTools，选中 popover 元素，逐级向上查看「Computed」面板里的 overflow 值。重点盯住那些显式设置了 overflow: hidden 的祖先节点——哪怕它离 popover 隔了 4 层 DOM，也会生效。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
注意：CSS 中的 overflow 不会继承，但它的裁剪效果会穿透所有后代；position: relative 的祖先不会自动创建裁剪上下文，只有带非 visible overflow 的祖先才会。
- 用「Toggle element panel」快速折叠/展开父级，观察 popover 是否随某一层消失/重现
- 临时在控制台执行
$0.style.overflow = 'visible'（$0 是当前选中元素），逐个测试哪一层放开后 popover 恢复完整 - 搜索页面中是否全局注入了类似
.card-body { overflow: hidden !important }的样式（尤其警惕 CSS-in-JS 或主题包）
可靠解法：从 DOM 结构或 JS 初始化入手
单纯调高 z-index 或改 overflow: visible 到错误层级，基本无效。真正起效的是切断裁剪链或绕过它。
- 移除问题祖先上的
overflow样式（最直接，适用于能改模板的场景） - 若必须保留滚动能力（比如卡片内容过长），把
overflow下移到更内层容器，例如：<div class="card-body"><div class="scrollable-content" style="overflow: auto">...</div></div>，确保 popover 插入在.card-body下但不在.scrollable-content内 - 使用框架提供的
container选项，让 popover 脱离原 DOM 上下文：Bootstrap 的data-container="body"或container: 'body'；Element Plus 的:teleport="document.body"；Ant Design 的getPopupContainer={() => document.body} - 手写 popover 时，用
document.body.appendChild()动态挂载，并手动计算 position，避开所有父级溢出限制
容易被忽略的细节
有些组件（如某些版本的 Bootstrap Vue）默认把 popover 挂在触发元素的父节点下，而不是 body；而某些 CSS BFC 触发方式（比如 display: flow-root）也会意外引入裁剪行为。真正要确认的不是“有没有 overflow: hidden”，而是“哪个祖先的渲染盒（rendering box）成了 popover 的裁剪边界”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
