当 Bootstrap 4 模态框内的卡片容器（.card-body）设置了 overflow: hidden，会导致其内部绝对定位的 Popover 元素被裁剪；移除该样式即可让 Popover 完全可见。
当 bootstrap 4 模态框内的卡片容器（`.card-body`）设置了 `overflow: hidden`，会导致其内部绝对定位的 popover 元素被裁剪；移除该样式即可让 popover 完全可见。
在使用 Bootstrap 4 构建模态框（Modal）时，若在 .modal-body 内嵌套了 .card .card-body，并尝试在其内部通过 position: absolute 实现按钮下方的自定义 Popover（如居中悬浮提示），常会遇到 Popover 被意外截断的问题——尤其当它靠近模态框底部时，部分区域可能被 .modal-footer 遮盖，或直接消失不见。
根本原因在于：父级容器的 overflow: hidden 会裁剪所有溢出其边界的子元素（包括 position: absolute 的元素），即使该子元素设置了高 z-index。在你的代码中，这一限制来自以下这行样式：
<div class="card card-body" style="padding: 0.5em; border: 0px; margin: 0px; overflow: hidden;">
<p>尽管 z-index: 999 和 position: absolute 理论上应确保 Popover 层级足够高，但一旦其祖先元素（此处为 .card-body）启用了 overflow: hidden，浏览器就会强制裁剪超出其边界的内容——z-index 在此失效，因为元素已不被视为“渲染流内可见”。</p>
<p>✅ 正确解法非常简洁：<strong>移除 .card-body 上的 overflow: hidden</strong>。</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4914" title="VPS Bootstrap"><img
src="https://img.php.cn/upload/skill/000/000/081/179025304626966.jpg" alt="VPS Bootstrap" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill4914" title="VPS Bootstrap" class="overflowclass">VPS Bootstrap</a>
<p class="overflowclass">从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。</p>
</div>
<a rel="nofollow" href="/xiazai/skill4914" title="VPS Bootstrap" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<p>修改后示例（关键修复行已标注）：</p>
<pre class="brush:php;toolbar:false;"><!-- ✅ 修复：删除 overflow: hidden -->
<div class="card card-body" style="padding: 0.5em; border: 0px; margin: 0px;">
<div style="margin: 0.5em; padding: 0px;">
Lorem ipsum dolor sit amet consectetur adipiscing elit nec montes eleifend
</div>
<hr style="margin-bottom: 3px; margin-top: 3px;">
<div class="row">
<div class="col-6 text-center">
<button class="btn btn-sm text-muted user-comm-react-btn">Button 1</button>
<!-- Popover 保持原样式，现可完整显示 -->
<div class="text-center bg-light shadow" style="position: absolute; width: fit-content; margin: 0px auto;
border-radius: 2em; left: 50%; transform: translateX(-50%);
z-index: 999; white-space: nowrap;
border: 1px solid rgb(227, 230, 240);">
Lorem ipsum dolor sit amet consectetur adipiscing elit nec montes eleifend
</div>
</div>
<div class="col-6 text-center">
<button class="btn btn-sm text-muted">Button 2</button>
</div>
</div>
<hr style="margin-bottom: 3px; margin-top: 3px;">
</div>
⚠️ 注意事项：
- 若需保留 .card-body 的内容溢出控制（例如防止长文本撑破容器），请改用更精确的约束方式，如 max-height + overflow-y: auto，而非全局 overflow: hidden；
- 确保 Popover 的定位上下文正确：position: absolute 依赖最近的 position: relative/absolute/fixed 祖先。当前结构中，.card-body 默认为 static，因此 Popover 实际相对于 或最近有定位的祖先定位——若需严格相对于按钮，请将按钮父容器（如 .col-6）设为 position: relative；
- Bootstrap 官方 Popover 组件默认采用 popper.js 动态计算位置并自动避让边界，建议在复杂场景中优先使用 data-toggle="popover" + 初始化脚本，而非纯 CSS 模拟，以获得更好的可访问性与响应式适配。
总结：overflow: hidden 是「静默裁剪者」，在模态框等深度嵌套布局中需格外警惕其对绝对定位元素的影响。一次精准的样式剥离，往往比堆砌 z-index 或 !important 更高效、更符合 CSS 层叠逻辑。
