模态框嵌套时z-index不生效的真正原因是父模态框创建了新的层叠上下文，导致子模态框的z-index仅在其内部生效；解决方法是将所有模态框挂载到document.body下并统一z-index体系。
模态框嵌套时 z-index 不生效的真正原因
不是数值写小了，而是父模态框创建了新的层叠上下文，导致子模态框的 z-index 只在它内部比较——哪怕你设成 z-index: 9999，也盖不过外部一个 z-index: 1000 的兄弟节点。
典型诱因包括：transform、opacity、filter、will-change，以及任何带 position + z-index 的父容器。只要其中一项存在，就自动触发新层叠上下文。
- 检查 Chrome DevTools → Elements → Styles 面板底部 «Layout» 区域，看目标模态框是否被标记为 “Stacking context”
- 若子模态框挂载在父模态框的
.modal-body内，而父模态框本身是position: relative; z-index: 1050，那子模态框天然被锁死在这个上下文中 - 第三方弹窗（如 Tippy、Flatpickr）默认挂载到触发元素附近，和 Bootstrap
.modal不在同一个 DOM 层级，物理上就不具备可比性
让多层模态框正确叠加的 DOM 挂载规则
所有需要跨层级覆盖的模态框，必须挂载到同一层叠上下文的根节点下——通常是 document.body 直系子元素。
Bootstrap 要求 .modal 是 body 子节点；React/Vue 项目中，createPortal 或 Teleport 就是用来干这事的。
- Vue 用户：用
<teleport to="body"><el-dialog>...</el-dialog></teleport>确保弹窗脱离父组件作用域 - React 用户：用
ReactDOM.createPortal把子模态框渲染到document.body - 避免把
el-drawer放在el-dialog内部——Element Plus 的 drawer 默认不支持嵌套定位，会继承父 dialog 的 stacking context
z-index 数值体系必须收敛，不能硬堆
Bootstrap 5 的 $zindex-modal 是 1050，$zindex-dropdown 是 1000；Tippy 默认用 2147483647，Flatpickr 是 9999。这些数字互不兼容，直接覆盖会导致下拉菜单被遮、遮罩层失效等连锁问题。
推荐做法是统一变量管理：
- 使用 Sass/Less：重定义第三方插件的变量，例如
$tippy-z-index: #{$zindex-modal + 10} - 不支持变量时，用选择器权重提升：
.modal .tippy-box { z-index: calc(#{$zindex-modal} + 5) !important; } - 禁用在
.modal-content上设position: relative——它会让所有子插件的z-index失效
绝对定位与层叠上下文的协作边界
position: absolute 本身不创建层叠上下文，但一旦和 z-index 同时出现，且父级满足触发条件（比如有 transform），就会被“截断”。
多层模态框中，常见错误是给中间容器加 transform: translateZ(0) 来强制硬件加速，结果意外创建了隔离上下文。
- 只对真正需要独立定位的容器设
position: relative，并确保它没附带其他触发属性 - 子模态框若需在父框内局部定位（比如右上角关闭按钮），用
position: absolute+top/right即可，别加z-index - 全屏类模态框（如加载遮罩）应设
position: fixed，z-index至少2000，且必须与主模态框同级挂载
最常被忽略的一点：层级混乱很少是单一 CSS 规则的问题，而是 DOM 结构、定位方式、层叠上下文三者错位的综合结果。调 z-index 前，先确认它们是否在同一棵渲染树里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
