根本原因是模态框未挂载在body下，导致父容器创建新层叠上下文，使.modal的z-index:1050仅在局部生效，而.modal-backdrop（z-index:1040）位于body层级，故将其盖住；须用createPortal、Teleport或appendChild将其移至body下。
为什么 modal 内容被 .modal-backdrop 盖住
根本不是 z-index 数值不够大，而是模态框没在正确的层叠上下文中生效。Bootstrap 默认要求 .modal 必须直接挂载在 document.body 下，否则父容器一旦有 position: relative、transform、opacity 或 filter，就会创建新层叠上下文，让 .modal 的 z-index: 1050 只在它内部起作用——而 .modal-backdrop（z-index: 1040）属于 body 这一级，自然就“盖”住了它。
常见错误现象：
- 模态框能显示，但点不了按钮、输不了文字（遮罩层拦截了所有交互）
- 打开开发者工具选中
.modal，发现它的父节点是某个div#app或.container，而不是body - 手动给
.modal加!important也没用，或加了之后整个页面布局错乱
如何确认并修复挂载位置问题
React/Vue 单页应用里最容易出这个问题：模态框组件写在某个路由组件内部，DOM 就自然嵌套在该组件的容器里。必须把它“提”到 body 下。
- React：用
createPortal渲染到document.body，别用return <modal></modal>直接写在 JSX 里 - Vue 3：用
<teleport to="body"><modal></modal></teleport>，不要依赖v-model挂在局部节点上 - 原生 JS：手动移动节点 ——
document.body.appendChild(modalEl)，注意要在modal.show()前执行，否则可能触发两次重排 - 检查是否重复挂载：某些 UI 库（如 Element Plus）会自动把遮罩插入
body，但内容仍留在组件内，造成两个层级起点不一致
修改 z-index 时的三个关键约束
硬写 z-index: 9999 是最危险的“速效解”。Bootstrap 5 的层级是语义化设计的，改一个就得同步改配套项。
- 必须同时调整
.modal和.modal-backdrop：比如把.modal改成1100，.modal-backdrop至少得设为1090，否则依然被盖 - 优先用 Sass 变量覆盖：在引入 Bootstrap 前定义
$zindex-modal: 1100和$zindex-modal-backdrop: 1090，避免魔法数字散落各处 - CSS 自定义属性方式（Bootstrap 5.3+）：在
:root中声明--bs-zindex-modal: 1100，比写死选择器更安全 - 禁用行内样式改
z-index：style="z-index: 2000"会破坏层叠逻辑，且无法被外部!important覆盖
哪些样式会静默创建层叠上下文
这些属性看起来跟层级无关，但只要加在 .modal 的任意父级上，就会让整个模态框“关进小黑屋”：
-
transform: translateZ(0)（常被误用作硬件加速） -
opacity: 0.99（哪怕只是 0.99，不是 1） -
filter: blur(1px)或任何非none值 will-change: transform-
position: fixed+z-index: auto的祖先元素
调试技巧：在开发者工具里逐级关闭父元素的 computed 样式，看哪一项关掉后 .modal 突然浮上来了。别只盯着 .modal 本身调 z-index，它可能压根没机会“突围”。
