模态框能显示但无法交互，根本原因是.modal-backdrop盖住了内容，通常因modal未挂载到body下、父容器创建新层叠上下文、overflow裁剪或z-index被外层限制所致。
模态框能显示但点不了按钮、输不了文字，基本就是 .modal-backdrop 盖住了内容——问题通常不在 z-index 数值本身，而在 DOM 挂载位置或层叠上下文被意外截断。
模态框没挂到 body 下导致层叠失效
React/Vue 单页应用里最常见：Modal 组件写在某个路由组件内，渲染后 DOM 嵌套在 div#app 或 .container 里。一旦父容器有 position: relative、transform、opacity 或 filter，就会创建新层叠上下文，让 .modal 的 z-index: 1050 只在它内部生效；而 .modal-backdrop（z-index: 1040）是直接插在 body 下的，自然就“盖”住了它。
- React：必须用
createPortal渲染到document.body，别直接return <modal></modal> - Vue 3：用
<teleport to="body"><modal></modal></teleport>，禁用v-model默认挂载行为 - 原生 JS：手动执行
document.body.appendChild(modalEl)，注意要在modal.show()前调用 - 检查方式：打开开发者工具选中
.modal，看它的父节点是不是body；不是就说明挂载错了
overflow: hidden 裁剪了绝对定位的弹出内容
在模态框里放 Popover、Tooltip 或自定义下拉菜单时，若其直接父级（比如 .card-body、.modal-body）设置了 overflow: hidden、auto 或 scroll，就会创建 BFC，把所有 position: absolute 子元素严格裁剪在其边界内——哪怕 z-index 写成 9999 也无济于事。
- 直接移除问题父级的
overflow声明（推荐） - 若需保留滚动能力，把
overflow下移到更内层容器，比如<div class="scrollable-content"> <li>确保 Popover 的定位基准正确：给包裹它的父级加 <code>position: relative - Bootstrap 官方 popover 推荐设
container: 'body'，从根源规避裁剪 - 最干净解法：去掉外层容器的
z-index，让它回归文档流自然堆叠 - 硬调
.modal-backdrop的z-index到 9 是权宜之计，但会破坏 Bootstrap 层级语义，后续升级易出问题 - 若必须保留外层
z-index，应同步提升.modal和.modal-backdrop，例如设为 1100 和 1090，并确保配套项（如.tooltip、.dropdown-menu）也对齐
z-index 冲突源于父容器自身带层级
如果模态框外层有个 div 设置了 z-index: 10，而它里面又嵌套了 .modal（z-index: 1050）和同级的 .modal-backdrop（z-index: 1040），那整个子树都受限于这个 z-index: 10 的“天花板”，.modal-backdrop 就可能反超内容层。
真正卡住人的地方，往往不是 z-index 数字不够大，而是 DOM 结构和 CSS 层叠规则在背后悄悄打架。先查挂载位置，再扫 overflow，最后动 z-index——顺序错了，越调越乱。
