模态框层级问题根源在于层叠上下文隔离而非z-index数值小；需确保.modal直挂body、避免父级创建新层叠上下文，并同步调整.modal与.modal-backdrop的z-index值。
模态框内容点不了、编辑器工具栏被裁剪、下拉菜单只显示半截——这些问题通常不是 z-index 写小了，而是它被“关进”了一个低层级的层叠上下文里，数值再大也出不来。
检查 .modal 是否被父容器创建了独立层叠上下文
Bootstrap 的 .modal 必须在 body 下直系挂载，否则只要父级有 position: relative + z-index（哪怕只是 z-index: 0），就会强制生成新层叠上下文，让 .modal 的 z-index: 1050 只跟这个父容器比，不跟 .modal-backdrop（在 body 下）比。
常见诱因包括：
- Vue/React 组件内直接写
<modal></modal>，导致 DOM 插入到#app或div容器中 - 自定义布局 wrapper 加了
position: relative和任意z-index - 父级用了
transform、opacity: 0.99、filter或will-change
验证方法：打开 Chrome DevTools → Elements → 选中 .modal 元素 → 看父节点是不是 body；再看右侧 Styles → Layout 区域是否标着 “Stacking context”。标了就说明被隔离了。
确认 .modal 和 .modal-backdrop 的 computed z-index 是否对齐
Bootstrap 5.3 默认是 .modal-backdrop: 1040、.modal: 1055。如果两者 computed 值相等或 .modal 更小，问题就在这儿。
别急着写 !important，先排查：
- 是否有自定义 CSS 覆盖了
.modal { z-index: auto }或unset - 第三方 UI 库（如 Ant Design）重写了
.ant-tooltip的z-index: 2000，但没同步改.modal-backdrop - 某些 admin 模板只改了
$zindex-modal，漏了$zindex-modal-backdrop
临时验证：在 Elements 面板里手动给 .modal 加 z-index: 1060，如果立刻可点，说明就是层级压住，不是 JS 或渲染问题。
修复第三方组件（如 CKEditor、Tippy.js）在模态框内被裁剪
CKEditor 气球工具栏默认 z-index: 1000，Dropdown 面板常为 1030，而 .modal 是 1055 —— 数值差一点，子元素就被“罩死”在局部上下文中。
关键不是调子元素，而是确保它们的父容器能“托起来”：
-
.modal-content不能设position: relative后又漏掉z-index（它默认是auto） - 显式提升工具栏层级：
.ck-toolbar-container { z-index: 1065 !important; } - 如果用
boundary: 'window'初始化 Dropdown 或 Tooltip，需配合 JS 移动 DOM 到body下，否则仍受父级上下文限制
注意：.modal 自身已定位且有 z-index，它的子元素若要突破，必须满足两个条件：父容器（如 .modal-content）也有足够高的 z-index，且未被更上层上下文包裹。
避免盲目用 9999 或 !important 破坏层级体系
硬塞 z-index: 9999 !important 看似解燃眉之急，实则埋雷：
- 后续加
.toast（默认1080）或.tooltip（1070）时，又得调更高，最终失控 - 多个第三方插件（如 Flatpickr + Tippy + Select2）各自写魔数，互相覆盖，维护成本爆炸
- 移动端 iOS Safari 对 fixed + 高 z-index 敏感，可能触发定位基准漂移，现象更诡异
真正可持续的做法是收敛到变量体系：用 Sass 重定义 $zindex-modal: 1055 后，同步设 $tippy-z-index: $zindex-modal + 10，或用选择器权重精准覆盖：.modal .tippy-box { z-index: calc(#{$zindex-modal} + 5) !important; }。复杂点永远不在数字本身，而在 DOM 挂载位置和层叠上下文的链路是否干净。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
