模态框被遮罩层挡住的根源是层叠上下文错位，而非z-index数值不足；需确认.modal是否挂载在body下，并排查父容器的position、transform、filter等创建新层叠上下文的样式。
模态框被遮罩层挡住，不是 z-index 数值不够大，而是 .modal 没落在正确的层叠上下文中——它大概率没挂载在 document.body 下，或者被某个父容器用 position: relative、transform 或 filter 截断了层级。
检查 .modal 和 .modal-backdrop 的 computed z-index
打开浏览器开发者工具，选中 .modal 元素，看它的 Computed → z-index 值；再选中 .modal-backdrop（通常紧挨着它），对比两者：
- Bootstrap 5 默认是
.modal-backdrop: 1040、.modal: 1050，差值必须为正且生效 - 如果两者数值相等、或
.modal更小，问题就在这儿 - 更危险的是：你看到的
z-index: 1050是声明值，但Computed里显示auto——说明它被父级层叠上下文“锁死”了，根本没参与全局比较
确认 .modal 是否挂载在 body 下
这是最常被忽略的根源。右键检查 .modal 元素，看它的直接父节点是不是 body：
- 如果不是（比如父节点是
div#app、.container或某个position: relative的 div），那.modal的z-index: 1050只在那个父容器内部起作用 -
.modal-backdrop却是直接插在body下的，z-index: 1040是对整个页面生效的——自然就“盖住”了它 - React 项目请用
createPortal(modalElement, document.body)；Vue 3 请用<teleport to="body"></teleport>；原生 JS 可在show.bs.modal事件前执行document.body.appendChild(modalEl)
避免父容器意外创建新层叠上下文
即使 DOM 挂对了位置，以下样式也会让 .modal 被“关进小黑屋”：
-
position: relative、absolute、fixed或sticky的父容器（尤其.modal-dialog或.modal-content上误加） -
transform（哪怕只是transform: translateY(0)）、opacity 、<code>filter、will-change - 检查方式：选中
.modal，往上逐级看父元素的Computed → transform和filter是否非none - 临时验证：给父容器加
transform: none !important，如果模态框立刻正常，就是它在作怪
改 z-index 时别只动一个地方
硬写 .modal { z-index: 9999 } 是陷阱。Bootstrap 的层级是配套设计的：
- 必须同步调
.modal-backdrop.show { z-index: 9998 }，否则遮罩仍可能压内容 - 若项目用了 Sass，优先在引入 Bootstrap 前定义
$zindex-modal: 1100和$zindex-modal-backdrop: 1090 - Bootstrap 5.3+ 支持 CSS 自定义属性：
:root { --bs-zindex-modal: 1100; }，比选择器覆盖更安全 - 禁用行内样式设
style="z-index: 2000"——它会破坏层叠逻辑，且无法被外部规则覆盖
真正卡住你的往往不是数字大小，而是那一层看不见的层叠上下文。DOM 位置和父容器样式，比改 z-index 值重要十倍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
