isolation: isolate 必须加在块级或定位容器上才生效，对display: inline元素完全无效；需确保computed值为block/flex/grid或position为relative/absolute/fixed，且必须作用于子元素的直接父容器。
isolation: isolate 必须加在块级或定位容器上才生效
这个属性对 display: inline 元素完全无效，哪怕你写了 display: block 但样式没真正应用（比如被更高优先级规则覆盖），它也不会创建层叠上下文。DevTools 的 «Layers» 面板里看不到 “Stacking Context Root”，基本就是这个原因。
确保目标元素满足以下任一条件：
-
display是block、flex、grid或table - 已设置
position: relative、absolute或fixed（static不行） - 不能加在
<span></span>、<a></a>这类默认 inline 的标签上，除非显式改 display 且确认 computed 值已生效 - 必须加在要隔离的子元素的**直接父容器**上，隔一层就失效
Safari 和 Android WebView 的前缀与顺序不能错
isolation: isolate 在 Safari 15.4+ 才原生支持；iOS 15.3 及更早、Safari 14 及更早版本会直接忽略它。Android 6.x 及更早 WebView 则连前缀都不认。
正确写法只有这一种顺序：
.blend-area {
-webkit-isolation: isolate;
isolation: isolate;
}
如果把 isolation: isolate 写在前面，Safari 15.4+ 会跳过 -webkit-isolation，而旧版 Safari 根本看不到声明——等于全平台失效。
别让外层 opacity/transform 把你的 isolation “套娃”掉
父容器用了 opacity: 0.99、transform: translateZ(0) 或 filter: blur(0)，就会提前创建一个层叠上下文。这时你加的 isolation: isolate 容器，只是它的子上下文，内部 z-index 或 mix-blend-mode 依然受限于外层边界。
检查方法：DevTools Elements 面板右键 → «Show stacking context»，看目标容器是否是根节点。如果不是，说明它被包进去了。
解决思路：
- 优先移除外层隐式触发属性（比如第三方轮播库加的
transform） - 若无法修改，就把
isolation: isolate往上提一层，加在尚未被污染的最近祖先上 - 不要指望靠调高内部
z-index来“穿透”外层上下文——它根本不在同一个计算域里
isolation: isolate 本身不控制层级，z-index 才管高低
isolation: isolate 只划界，不升层。它不会让容器自动浮到最上面，也不会改变自身渲染样式。想让它参与外层堆叠（比如弹窗盖住导航栏），必须额外加 position 和 z-index：
.modal-header {
position: relative;
z-index: 1000;
-webkit-isolation: isolate;
isolation: isolate;
}
常见误区：
- 误写成
isolation: on或isolation: true—— 只有isolate是合法值 - 只加
isolation不加position，导致z-index无效 - 以为加了就能解决所有混合/层级问题，却没意识到它只是“定义范围”的起点
真正容易被忽略的是：它不提升层级，只定义范围。你得先确认容器自己有没有资格参与外层堆叠，再谈内部怎么排布。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
