是，isolation: isolate 能救场但有前提：它强制创建层叠上下文，解决父容器未形成上下文导致的 z-index 失效，但子元素仍需定位且层级受父在外部上下文中的位置制约。
z-index 失效时，isolation: isolate 真的能救场吗
z-index 不生效，八成不是没写对值，而是父容器没形成层叠上下文。加 isolation: isolate 确实能强制创建新层叠上下文，但它不等于“让子元素 z-index 随意乱飞”——它只隔离本层，不接管子元素的层叠顺序逻辑。
- 它不会改变子元素的
z-index计算起点（仍基于该新上下文的根） - 它不能绕过定位限制：子元素仍需
position为relative/absolute/fixed才能响应z-index - 它对
transform、opacity等隐式触发层叠上下文的属性无冲突，但优先级更低（isolation是显式声明，更可控）
什么时候必须用 isolation: isolate 而不是 transform: translateZ(0)
老办法用 transform: translateZ(0) 强制升层，容易踩坑：它会触发硬件加速，可能引起字体发虚、滚动卡顿，且在部分 Safari 版本中导致 will-change 行为异常。
isolation: isolate 是纯层叠控制，零副作用：
- 不影响渲染管线，不强制 GPU 合成
- 兼容性足够：Chrome 52+、Firefox 50+、Safari 15.4+（iOS 15.4+），Edge 79+
- 它只干一件事：让这个盒子成为层叠上下文边界，不附带任何视觉或性能扰动
父设 isolation: isolate 后，子元素 z-index 还是不听使唤？检查这三点
常见现象：父元素加了 isolation: isolate，子元素也写了 position: relative 和 z-index: 999，但依然被其他区域内容盖住。
立即学习“前端免费学习笔记（深入）”；
- 子元素是否处于同一个层叠上下文内？比如它的某个祖先（非直接父）已设
z-index且形成上下文，那它实际比较的是那个祖先上下文内的顺序，不是全局 - 父元素自身有没有
z-index值？isolation: isolate创建上下文，但不赋予层级高度；若父本身在旧上下文中z-index: 1，那整个隔离块都卡在z-index: 1层里 - 是否存在
pointer-events: none或visibility: hidden等遮蔽行为？这些会干扰视觉层叠判断，但不报错
一个最小可验证例子：隔离前后对比.container {
isolation: isolate; /* 关键：这里创建独立层叠上下文 */
}
.box-a {
position: relative;
z-index: 10;
}
.box-b {
position: relative;
z-index: 5;
}
没加 isolation: isolate 时，.box-a 和 .box-b 的 z-index 是跟整个页面其他定位元素一起比的；加了之后，它们只在 .container 内部比大小，外部元素无法“插队”。
但注意：.container 自身在外部上下文中的层级，仍由它自己的 z-index（如果有）、文档流位置、或其他层叠上下文决定——这点最容易被忽略。
