当在 Bootstrap 4 模态框（modal）内使用绝对定位的自定义 Popover 时，若其父容器（如 .card-body）设置了 overflow: hidden，会导致 Popover 被裁剪隐藏——移除该样式即可彻底解决。
当在 bootstrap 4 模态框（modal）内使用绝对定位的自定义 popover 时，若其父容器（如 `.card-body`）设置了 `overflow: hidden`，会导致 popover 被裁剪隐藏——移除该样式即可彻底解决。
在 Bootstrap 4 中，模态框内的自定义 Popover（非原生 data-toggle="popover"，而是手动编写的绝对定位元素）常因 CSS 层叠上下文或溢出裁剪而显示不全。从你提供的代码可见，Popover 使用了 position: absolute 并通过 left: 50%; transform: translateX(-50%) 实现水平居中，逻辑正确；但其直接父级
同时设置了 overflow: hidden（见 style="padding: 0.5em; border: 0px; margin: 0px; overflow: hidden;"），这正是问题根源。
CSS 规范明确规定：当一个元素设置了 overflow: hidden（或 auto/scroll），它会为内部绝对定位子元素创建一个新的块格式化上下文（BFC），并将其裁剪范围限制在自身边界内。因此，即使 Popover 的 z-index: 999 远高于 .modal-footer（z-index: 4），它仍会被 .card-body 的“裁剪框”截断，无法突破父容器边界显示。
✅ 正确解法非常简洁：
<!-- ❌ 错误：触发裁剪 --> <div class="card card-body" style="padding: 0.5em; border: 0px; margin: 0px; overflow: hidden;"> <!-- ✅ 正确：移除 overflow: hidden --> <div class="card card-body" style="padding: 0.5em; border: 0px; margin: 0px;"> <p>⚠️ 注意事项： </p> <ul> <li>不要依赖盲目调高 z-index 来“覆盖”裁剪问题——z-index 控制层叠顺序，但无法绕过 overflow 引发的视觉裁剪； </li> <li>若需保留 .card-body 内容滚动能力（如长文本），应将 Popover 移至更高层级的、无 overflow 限制的容器中（例如 .modal-body 或 .modal-content），并用 JavaScript 动态计算位置； </li> <li>Bootstrap 官方 Popover 组件默认渲染在 下，天然规避此问题，推荐在复杂场景优先使用 data-toggle="popover" + 初始化脚本，而非纯 CSS 实现。</li> </ul> <p>总结：overflow: hidden 是 UI 中“隐形杀手”之一，尤其在组合使用绝对定位与嵌套模态结构时。排查此类遮挡问题，应优先检查 Popover 父级及所有祖先元素的 overflow 和 transform（后者也会创建 BFC）属性，而非仅聚焦 z-index。</p> </div> </div>
