isolation: isolate 本身不使 mix-blend-mode 失效，而是强制创建新层叠上下文，使混合仅限于容器内部，不再与外部背景或兄弟元素混合；它对 inline 元素无效，且需配合 position 和 z-index 才能正确生效。
mix-blend-mode 突然失效，是不是 isolation 搞的鬼？
大概率是。加了 isolation: isolate 本身不会让 mix-blend-mode 失效，但它会**改写混合发生的范围**：元素不再跟 body 背景、父容器背景或隔壁兄弟元素混合，只跟自己内部的子元素混合。
常见现象：
- 原本
mix-blend-mode: multiply能把文字压在图片上变暗，加了isolation: isolate后文字变回原色 - 两个重叠的
div原本能混合出新颜色，隔离后像没加一样 - DevTools 里看到 computed 的
mix-blend-mode值还是multiply，但视觉毫无反应
这不是 bug，是预期行为——它划了一条线，线外的像素不参与计算。要恢复混合，得让目标元素和它想混合的对象回到同一个层叠上下文里。
为什么加了 isolation: isolate 后 z-index 不管用了？
isolation: isolate 只负责创建新层叠上下文，不负责提升这个上下文自身的层级。它让内部的 z-index 有效，但整个容器在外部仍可能被压着。
典型场景：
- 导航栏用了
z-index: 100，你给卡片加了isolation: isolate和内部z-index: 999，结果卡片还是被导航栏盖住 - 卡片容器本身是
position: static，没设z-index，那它在外部堆叠顺序就是 0
必须补两样东西：
-
position: relative（或absolute/fixed） - 显式的
z-index（比如z-index: 101）
否则，再高的内部 z-index 也出不了这个盒子。
isolation: isolate 对 inline 元素无效，别白费劲
如果目标容器是 display: inline 或 inline-block，isolation: isolate 直接被忽略，连层叠上下文都不会创建。
验证方法很简单：
- 打开 Chrome DevTools → Elements 面板 → 选中该元素 → 右侧 Computed → 搜
isolation，看值是不是isolate - 再搜
stacking context，确认是否标记为 “Stacking context root”
修复方式只有两个：
- 改成
display: block/flex/grid - 或者加
position: relative（哪怕只是临时加来触发）
别指望靠 vertical-align 或 line-height 补救，它们不改变层叠上下文生成逻辑。
Safari 14 及更早版本不支持 isolation: isolate
如果你的页面在 Safari 旧版里混合完全不工作，大概率卡在这儿。原生 isolation 是 Safari 15+ 才支持的。
兼容写法必须带前缀：
.blend-container {
-webkit-isolation: isolate;
isolation: isolate;
}
注意两点：
- 前缀必须写在标准属性前面，否则会被覆盖
- 别写成
isolation: on或isolation: true—— 浏览器直接当无效值丢弃
真正复杂的地方在于：它不提升层级，只定义范围；而这个“范围”的边界，在不同浏览器里对 inline 元素、匿名 box、table-cell 的处理仍有细微差异，上线前务必在真机上测。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
