z-index失效时应先检查stacking context而非盲目调大数值，因opacity、transform、filter等属性会意外创建隔离层级，使子元素z-index仅在该context内生效。
z-index失效时，先查 stacking context 而不是调大数值
绝大多数 z-index 不生效，不是因为值太小，而是目标元素被包裹在某个意外创建的 stacking context 里。比如父容器写了 opacity: 0.99、transform: translateZ(0) 或 filter: blur(0.5px)，哪怕只是为动画做硬件加速，也会立刻隔离层级——子元素的 z-index 只能在该容器内比大小，对外无效。
实操建议：
- 打开 Chrome DevTools → 「Layers」面板，直接看到 stacking context 的嵌套边界
- 在「Computed」标签页搜索 stacking context，看目标元素或任意祖先是否被标记为 “Stacking context by …”
- 临时删掉疑似父级的 opacity、transform 等声明，观察遮罩层/弹窗是否突然显示正常
同级浮层共存时，必须确保它们属于同一 stacking context 根
当 .modal、.tooltip、.toast 同时出现，靠硬写 z-index: 9999 很快就会冲突。真正可控的做法是让它们挂载到同一个高优先级容器下，而不是各自分散在不同父级里。
常见错误现象：
- 自定义弹窗嵌在 .navbar 内，但 .navbar 有 transform → 弹窗被锁死在 navbar 的 stacking context 里，再高的 z-index 也压不过外部 .modal-backdrop
- .dropdown 在 .card 里展开，而 .card 设了 z-index: 0 → 它自己就成了新 context，dropdown 永远出不来
实操建议：
- 把所有全局浮层（modal、toast、loading）统一 mount 到 document.body 下，绕过中间 DOM 层级干扰
- 若必须嵌套，给共同父容器设 position: relative + 显式 z-index（如 z-index: 1000），再让子元素在其内部用小范围值（z-index: 1 / 2）排序
- 避免对非必要容器设 z-index: 0 —— 它会创建新 context，且语义上毫无意义
移动端 fixed 元素自动创建 stacking context，需特别处理
iOS Safari 和部分安卓 WebView 中，position: fixed 元素默认创建 stacking context，且层级高于普通 absolute 元素。这意味着：即使你在弹窗上设了 z-index: 9999，只要它父级是 fixed，而遮罩层是直接挂 body 下的 absolute，遮罩层大概率被压在下面。
实操建议：
- 不要把整个弹窗结构包在 position: fixed 容器里；更稳妥的是让遮罩层和弹窗同级，都用 position: fixed 并共享一个根容器
- 如果必须用 fixed 布局，给遮罩层和弹窗共同的父元素设 position: fixed; z-index: 1055（参考 Bootstrap 的 $zindex-modal），再分别控制子元素层级
- iOS 滚动时弹窗错位+遮挡，可尝试给弹窗本身加 transform: translateZ(0) 稳定渲染层，但要同步检查是否因此新增了嵌套 stacking context
用 CSS 自定义属性管理 z-index，避免 magic number
把 z-index 当魔法数字硬堆（999、9999、99999）是失控的开始。真正可维护的方式是用 CSS 自定义属性定义语义化层级，例如 --z-modal: 1055、--z-tooltip: 1070，并在变量层面保持顺序清晰。
实操建议：
- 从框架源码（如 Bootstrap 的 _variables.scss）抄真实值，别猜：$zindex-modal-backdrop: 1040、$zindex-modal: 1055
- 定义小范围整数变量：:root { --z-nav: 100; --z-dropdown: 1000; --z-modal: 1050; }，后续扩展只需增减个位数
- 配合 isolation: isolate 主动创建干净的 stacking context，防止子组件受外部样式污染
- 在 JS 中动态插入浮层时，读取 getComputedStyle(document.documentElement).getPropertyValue('--z-toast') 获取当前值，而非写死数字
stacking context 的边界不像 border 那样肉眼可见，但它真实存在、不可绕过。最常被忽略的点是：opacity 小于 1、transform 非 none、甚至 position: relative + z-index: auto 这些“看似无害”的组合，都会悄悄改写整个层级逻辑。调试时别只盯着子元素，得一层层往上翻 computed styles。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
