弹窗未盖住其他元素的根本原因是层叠上下文被父容器（如含transform、opacity等属性）提前创建，导致z-index仅在局部生效；真正解决需将弹窗设为body直接子节点并用position:fixed，同时确保祖先链无z-index或触发新上下文的属性。
为什么弹窗没盖住其他元素？z-index 失效的常见原因
不是 z-index 数值不够大，而是层叠上下文（stacking context）断了。即使你写了 z-index: 9999，如果弹窗父容器有 transform、opacity、filter 或 will-change 等属性，它就会创建新的层叠上下文——此时 z-index 只在该容器内部生效，无法突破到全局。
- 检查弹窗直接父级是否带
transform: translateZ(0)、opacity: 0.99或filter: blur(1px) - 用浏览器开发者工具的“Layers”面板或“Computed”标签页，看弹窗是否被框在某个 stacking context 里
- 临时移除父级样式验证：把弹窗用
document.body.appendChild(modalEl)直接挂到body下，再试一次
如何真正让弹窗成为“页面最上层”？必须满足的两个硬条件
只靠 z-index: 9999 不够，必须同时满足：位置脱离文档流 + 层叠上下文根节点可向上穿透。这意味着弹窗自身不能被限制在某个局部上下文中，且它的祖先链上不能有提前截断的 z-index 容器。
- 弹窗元素必须是
body的直接子节点（用 JS 动态插入时确保调用document.body.appendChild(el)，而非插进某个div#app） - 弹窗自身设为
position: fixed或position: absolute（fixed更稳妥，不受滚动容器影响） - 弹窗及其所有祖先（直到
body）都不能有z-index值（包括auto以外的显式值），否则会提前建立层叠上下文 - 避免给
html或body设transform、opacity等触发新上下文的属性
z-index: 9999 真的有必要吗？数值选多少才安全
9999 是惯性写法，但实际只要比页面中所有其他层叠上下文的根节点 z-index 高就行。问题在于，你很难预判第三方库（比如某些 UI 组件、广告 SDK、埋点脚本）会不会偷偷给某个容器设 z-index: 2147483647——这已经接近 CSS z-index 的最大整数上限。
- 更稳妥的做法是使用
z-index: 2147483647（即2^31 - 1），这是 CSS 规范允许的最大值，也是一些框架（如 Bootstrap 5+）默认采用的 - 不要依赖“比别人高一点”，而要确保弹窗本身处于顶层上下文：用
position: fixed; top: 0; left: 0; width: 100%; height: 100%占满视口，再叠一层半透明遮罩 - 若项目已存在多个 z-index “体系”，建议统一定义 CSS 变量，例如
:root { --z-modal: 2147483647; }，避免散落的魔法数字
Vue/React 项目里弹窗被 Portal 外的样式污染怎么办
用 createPortal（React）或 Teleport（Vue 3）把弹窗挂到 body 是对的，但容易忽略两件事：组件内联样式作用域泄漏，以及 CSS-in-JS 库（如 Emotion、styled-components）自动加的哈希类名可能被父组件样式意外覆盖。
立即学习“前端免费学习笔记（深入）”；
- 确保弹窗内容区域的 CSS 类名不与主应用冲突，必要时加唯一前缀，如
myapp-modal__overlay - 如果用了 CSS Modules 或 scoped style，确认
Teleport/createPortal后的节点**不再受原组件样式作用域保护**，需手动把相关样式提取到全局或用:global(...) - 检查是否有全局重置样式（如
* { z-index: 0 }）误匹配弹窗元素——这种规则会覆盖你精心设置的z-index
CSS 的层叠行为从来不是单靠一个数字决定的；最容易被忽略的是“谁在管这个 z-index”——不是你在弹窗上写的那个值，而是它最近的、有 z-index 的祖先说了算。
