Bootstrap 5 默认 .modal-backdrop 的 z-index 是 1040，.modal 本体为 1050；遮罩层被盖住或穿透时，需检查 z-index 冲突、父容器层叠上下文及第三方组件覆盖。
Modal 背景遮罩层（.modal-backdrop）的 z-index 是多少？
bootstrap 5 默认的 .modal-backdrop 的 z-index 是 1050，而 .modal 本体是 1055。这个差值（5）保证了模态框浮在遮罩之上。如果你发现遮罩盖住了 modal 内容、或被其他元素（比如顶部导航栏、第三方组件弹窗）穿透，大概率是 z-index 冲突——不是 modal 本身不够高，而是遮罩太低，或别的东西太高。
如何安全提高 .modal-backdrop 的层级？
直接覆盖 CSS 是最常用也最稳妥的方式，但必须注意选择器权重和加载时机：
- 用
!important不推荐，除非你明确知道没有更优解；优先靠选择器提升权重 - 确保你的自定义样式在 Bootstrap CSS 之后加载，否则会被覆盖
- 推荐写法：
.modal-backdrop.show { z-index: 1060 !important; }（加.show是为了只影响已打开的遮罩，避免未触发时的冗余计算） - 如果项目用 Sass，改
$zindex-modal-backdrop变量后重新编译，更彻底但需构建介入
为什么改了 backdrop z-index 还没生效？
常见原因不是代码写错，而是被其他层“截胡”了：
- 父容器设置了
transform、filter或will-change，会创建新的层叠上下文，导致子元素的z-index相对这个新上下文起作用，而非全局 - 某些 UI 库（如 Element Plus、Ant Design）的全局提示（
message、notification）默认 z-index 高达2000+，它们可能无意中压住了你的 backdrop - 检查浏览器开发者工具里实际生效的
z-index值，看是否被更高优先级规则覆盖（比如内联样式或 ID 选择器） - Modal 是动态插入 DOM 的，确保你的 CSS 在 Modal 插入前已就绪；若用 JS 动态加载样式，要等
document.styleSheetsready
移动端 Safari 上 backdrop 点击穿透怎么办？
这不是 z-index 问题，而是 Safari 对 pointer-events: none 在伪元素或动态插入 backdrop 上的兼容性缺陷。Bootstrap 5 的 backdrop 默认使用真实 DOM 元素，但某些定制版本或插件会用 ::before 模拟，这时容易失效。
- 确认 backdrop 是真实
<div class="modal-backdrop"> 元素，不是伪类生成 <li>给 <code>.modal-backdrop显式加上pointer-events: auto（Bootstrap 默认是auto，但某些重置 CSS 会设成none） - 如果 Modal 内有
position: fixed子元素，它可能脱离 backdrop 层叠上下文，造成点击区域错位——把这类元素移到.modal-dialog外部或改用position: absolute+ 定位补偿
真正卡住人的，往往不是改哪个数字，而是改完之后，那个“看起来应该被盖住却还点得着”的元素，其实早就悄悄建了自己的层叠上下文。
