先检查被遮模态框是否被标记为“Stacking context”，若是则说明其与第三方插件不在同一层叠上下文中，调z-index无效；再排查position、transform、opacity等触发新层叠上下文的属性，并确保二者DOM挂载位置一致（均在body下）且z-index数值对齐Bootstrap变量体系。
模态框被第三方弹窗盖住，先看 computed z-index 值
打开 Chrome DevTools → Elements 面板，选中 .modal 元素，在右侧 Styles 标签页拉到底部 «Layout» 区域，看它是否被标记为 “Stacking context”。如果标了，说明它和第三方插件（比如 Tippy.js 的 tooltip、Flatpickr 的日历面板）不在同一层叠上下文里——此时调 z-index 数值基本无效。
常见诱因包括：
- 第三方插件的容器（如
.tippy-box父级）加了position: relative或transform: translateZ(0) - 你的模态框父组件（比如 Vue 的
<div id="app">）设置了z-index，却没设position，导致浏览器自动创建隐式层叠上下文 - 某些 UI 库（如 Ant Design）默认把
.ant-tooltip设为z-index: 2000，远高于 Bootstrap 的.modal: 1050
Bootstrap 和第三方插件的 z-index 必须对齐，不能硬写 9999
Bootstrap 5 的 $zindex-modal 默认是 1050，$zindex-modal-backdrop 是 1040；而 Tippy.js 默认用 z-index: 2147483647，Flatpickr 是 z-index: 9999。直接覆盖成 z-index: 9999 !important 会破坏整个层级体系——比如下拉菜单（$zindex-dropdown: 1000）可能被新 backdrop 盖住。
正确做法是统一收敛到变量体系：
立即学习“前端免费学习笔记（深入）”；
- 如果你用 Sass/Less，重定义第三方插件的 z-index 变量（如
$tippy-z-index: #{$zindex-modal + 10}） - 若插件不支持变量，用选择器权重提升：
.modal .tippy-box { z-index: calc(#{$zindex-modal} + 5) !important; } - 避免在
.modal-content上设position: relative，否则子插件的 z-index 只在该局部上下文中生效
React/Vue 项目里，第三方插件挂载位置必须和 modal 对齐
很多冲突不是 z-index 写错了，而是 DOM 挂载点错位：Bootstrap 要求 .modal 是 document.body 直系子节点，但第三方插件（如 CKEditor 的气球工具栏、Tippy 的 tooltip）常默认挂载到触发元素附近——结果一个在 body 下，一个在某个 div.modal-body 内，天然分属不同层叠上下文。
解决方案要匹配框架特性：
- Vue 3：用
<teleport to="body">包裹第三方浮层容器，确保它和.modal同级 - React：用
createPortal把插件浮层渲染到document.body，别让它留在Modal组件树里 - 原生 JS 插件（如 Flatpickr）：初始化时传入
appendTo: document.body选项
移动端 Safari 上的穿透和错位，和 z-index 无关
iOS Safari 对 position: fixed 和层叠上下文极其敏感。即使 .modal 和 .tippy-box 的 computed z-index 正确，也可能出现点击穿透、工具栏闪退、键盘顶起后浮层消失等问题。
关键排查点：
- 检查模态框或其任意父级是否用了
transform、opacity、filter——这些会强制 Safari 把fixed当作absolute处理 - 确认第三方插件没给自身容器加
will-change: transform - 避免在
.modal-dialog上设overflow: hidden，否则 Safari 会截断内部fixed子元素
真正难处理的是那些依赖 getBoundingClientRect() 动态定位的插件——它们在 iOS 键盘弹出/收起瞬间获取的位置坐标会失效，这时得监听 resize 或 focusin 事件手动重定位，而不是纠结 z-index。
