模态框显示但内容不可见，主因是z-index层级冲突或挂载位置错误；需确保.modal（1050）高于.modal-backdrop（1040），且DOM挂载于body下，避免position:relative创建新层叠上下文。
模态框显示但内容不可见，检查 z-index 层级冲突
Bootstrap 模态框（modal）本身依赖明确的 z-index 值来确保浮在遮罩层（.modal-backdrop）之上。如果模态框主体（.modal）被遮罩挡住，大概率是它的 z-index 小于或等于 .modal-backdrop 的值，或者被其他高 z-index 元素（如导航栏、固定定位弹窗）压住。
Bootstrap 5 默认层级如下：
- .modal-backdrop：1040
- .modal：1050
- .navbar（fixed-top）：1030
- .toast：1090
常见诱因包括：
- 自定义 CSS 中给
.modal或其父容器设置了z-index: auto或过低值 - 模态框插入到
body外的某个position: relative容器中，导致层叠上下文重置 - 第三方库（如某些 UI 组件）覆盖了 Bootstrap 的
z-index变量
确认模态框是否正确挂载到 body
Bootstrap 要求模态框 DOM 必须直接挂载在 body 下，否则会受父级 position 和 z-index 影响，形成独立层叠上下文，使 z-index: 1050 失效。
检查方式：
- 打开浏览器开发者工具，选中模态框根元素
.modal，看其父节点是不是body - 若它嵌套在某个
div或app根容器里（尤其 React/Vue 单页应用），需手动移动
解决方法（以原生 JS 为例）：
const modalEl = document.getElementById('myModal');
document.body.appendChild(modalEl); // 确保挂载到 body
Vue/React 中推荐用 teleport（Vue 3）或 createPortal（React）把模态框渲染到 body 下，而非组件内部。
避免在模态框上误加 position: relative
给 .modal 或其直接父容器（如 .modal-dialog）添加 position: relative 是常见错误。这会创建新的层叠上下文，导致其内部所有子元素的 z-index 都只在该上下文中生效——即使 .modal-content 设了 z-index: 2000，也仍可能低于外部的 .modal-backdrop（因为后者属于另一个上下文）。
排查建议：
- 在开发者工具中检查
.modal和.modal-dialog的 computedposition和z-index - 移除所有非必要的
position声明，尤其是relative；Bootstrap 依赖absolute（.modal-dialog）和fixed（.modal）定位 - 若必须加定位，请确保不触发新层叠上下文（例如改用
transform: translateZ(0)替代position: relative）
使用 !important 是临时手段，优先查清来源
虽然加 z-index: 1055 !important 到 .modal 能快速“修复”，但这掩盖了真正问题——比如可能是某处全局样式把 .modal-backdrop 提到了 1060，或是主题 CSS 重写了 $zindex-modal 变量却没同步更新 $zindex-modal-backdrop。
更稳妥的做法：
- 搜索项目中所有
z-index声明，定位冲突源（特别是带!important的） - 如果是 Sass 项目，确认
_variables.scss中$zindex-modal和$zindex-modal-backdrop的差值 ≥ 10 - 用浏览器“Computed”面板查看最终生效的
z-index，而不是仅看 Styles 面板中的规则
模态框的层级逻辑看似简单，但一旦混入自定义定位、动态挂载或 CSS-in-JS，很容易在层叠上下文边界处失效——那里没有报错，只有静默的遮挡。
