isolation: isolate 不提升层级，只创建独立层叠上下文边界；若容器未设 position 和 z-index，或被外层隐式上下文包裹，z-index 仍无效，且 safari/旧安卓需前缀或降级方案。
isolation: isolate 本身不会失效，失效的是你对它作用边界的理解——它不提升层级，只划边界；边界没立住，渲染就“看不见”。
为什么加了 isolation: isolate 后 z-index 还是不起作用
根本原因不是浏览器不认这个属性，而是 isolation: isolate 只让容器成为新层叠上下文的“根”，但这个“根”自己在外部堆叠顺序里仍是默认层级（z-index: auto → 相当于 0）。如果它的父级或兄弟元素有更高的 z-index，整个隔离块就被压住。
- 必须给隔离容器自身加
position: relative（或absolute/fixed），否则z-index无效 - 必须显式设置
z-index（如z-index: 100），不能依赖auto - 避免祖先元素已有
opacity: 0.99、transform: scale(1)或filter: blur(0)—— 它们会提前创建外层上下文，把你的isolation包进“套娃”里
Safari 和旧安卓 WebView 中 isolation 不生效的硬伤怎么绕
Safari 15.4 之前（尤其是 iOS 15.4–16.4）和部分安卓 WebView（Android 6.x 及更早）根本不支持原生 isolation: isolate，写了等于白写。
- Safari 必须加前缀且顺序严格：
-webkit-isolation: isolate要写在isolation: isolate之前 - 旧安卓 WebView 建议降级为
position: relative; z-index: 0—— 它兼容性更好，无 GPU 渲染副作用，但需确保父容器没其他定位或隐式触发属性 - 别用
transform: translateZ(0)降级：旧设备易卡顿，文字发虚，配合overflow: hidden还可能裁剪错位
mix-blend-mode 突然变灰或没反应，是不是 isolation 搞的鬼
不是失效，是混合范围被重定义了。isolation: isolate 不禁用 mix-blend-mode，但它强制创建新层叠上下文，使混合只发生在容器内部子元素之间，不再与 body 背景、父容器背景或兄弟元素混合。
- 原本
mix-blend-mode: multiply让文字压图变暗，加了isolation后文字恢复原色 —— 因为它不再跟图片混合，只跟自己容器内其他子元素混合 - DevTools 里
mix-blend-mode的 computed 值仍是multiply，但视觉无变化，这是预期行为 - 要恢复跨容器混合，得把目标元素和想混合的对象拉回同一个层叠上下文里（比如去掉父级
isolation，或把两者都放进同一隔离容器）
inline 元素上加 isolation: isolate 为什么完全没反应
isolation: isolate 对 display: inline 或 inline-block 元素无效，浏览器直接忽略，连层叠上下文都不会创建。
- 必须作用于块级容器（
display: block、flex、grid）或已定位元素（position: relative/absolute/fixed） - 常见误用：给
<span></span>或按钮内联元素加isolation，结果毫无效果 - 修复方式：包裹一层
div或直接改该元素为display: inline-flex+position: relative+z-index: 0
真正容易被忽略的点是：isolation 不是开关，是边界桩。你得先确认桩打在哪——容器是否块级、是否定位、是否裸露在外层上下文里，否则再标准的写法也撑不起一个独立渲染层。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
