z-index不生效主因是父容器创建了新的层叠上下文；需检查transform、opacity等属性，用开发者工具验证，合理提升容器层级并统一管理z-index变量。
z-index 不生效？先检查父容器的 stacking context
绝大多数 z-index 失效不是值设小了，而是元素被包裹在了一个新的 stacking context 里——比如父元素有 transform、opacity、filter 或 will-change，哪怕只是 transform: translateZ(0)，都会隐式创建独立层叠上下文，导致子元素的 z-index 只在该容器内比较，不再和外部兄弟元素竞争。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用浏览器开发者工具的「Layers」面板或「Computed」标签页，查看目标元素是否被标记为
stacking context - 临时移除父级的
transform、opacity: 0.99等属性，确认是否恢复预期层叠 - 若必须保留这些属性（如动画优化），就把需要提层的元素“提”到更高层级的容器中，而不是依赖子级
z-index
CSS 自定义属性 + 层级变量统一管理 z-index 值
硬编码 z-index: 9999 或靠猜值往上加，很快就会失控。真正可维护的方式是把层叠关系变成显式变量，用 CSS 自定义属性集中定义语义化层级。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在
:root中定义层级变量，例如：:root { --z-modal: 1000; --z-dropdown: 900; --z-toast: 800; --z-fixed-header: 700; } - 组件内直接使用：
z-index: var(--z-modal);，避免魔法数字 - 不推荐用 SASS 变量替代——它无法动态计算或被 JS 读取，后期调试和运行时覆盖都受限
React/Vue 组件中动态插入样式时 z-index 的陷阱
在 Modal、Tooltip 等组件中，常通过 createPortal 或 teleport 把内容挂载到 body 下，但容易忽略：挂载后它的父容器是 body，而 body 默认没有 position，不会形成 stacking context，此时组件的 z-index 实际和页面其他绝对定位元素在同一层级竞争——如果其他地方用了 z-index: 2147483647，你的 --z-modal: 1000 就毫无意义。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保 portal 目标容器（如
#app-root）设置了position: relative或position: static以外的值，否则它不参与层叠排序 - 不要假设
body是安全的挂载点；更稳妥的是创建一个专用容器：<div id="overlay-root" style="position: relative"></div> - 服务端渲染（SSR）场景下，注意
body初始无position，JS 挂载前可能短暂错层
第三方库（如 Bootstrap、Ant Design）覆盖 z-index 的应对方式
这类库通常自带一套 z-index 常量（如 Bootstrap 的 $zindex-modal），但它们只在源码里生效。一旦你用 CDN 引入未编译 CSS，就无法通过重定义变量覆盖；而自行修改 node_modules 更不可行。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先查文档确认其 z-index 命名规则，比如 Ant Design 的
.ant-modal默认是z-index: 1000，那你的自定义弹窗至少设为1001并加!important（仅限兜底） - 用更高特异性选择器覆盖，例如：
#my-app .ant-modal { z-index: 1100 !important; } - 长期项目建议 fork 主题包，或使用官方主题工具（如 Ant Design 的
modifyVars）重新编译 CSS
z-index 看似只是个数字，但它背后绑定的是整个渲染树的层叠上下文链。最常出问题的地方不在值本身，而在你没意识到某个 opacity: 0.99 或一次 createPortal 已经悄悄把你拽进了另一个层叠宇宙。
