isolation: isolate只创建独立层叠上下文，不提升层级；必须加在目标组件的直接父容器上，且该容器需为块级并设置position和z-index才生效。
isolation: isolate 不是 z-index 的放大器，它只划边界、不提层级——加错位置或漏掉 position，就等于没加。
给谁加 isolation: isolate？不是弹窗，是它的直接父容器
常见错误是把 isolation: isolate 加在 Tooltip、下拉菜单或高亮块自身上。它对 inline 元素无效，也不作用于已定位的子元素；它只对块级容器生效，且必须是目标组件的「最近共同父容器」。
比如你在 Tiptap 编辑器里插入一个浮动代码高亮层，真正要加样式的是编辑内容区本身，通常是 div[data-slate-editor] 或 div.ql-editor 这类 wrapper 节点。
- 先确认该容器是 block、flex 或 grid 布局，或已设
position: relative/absolute/fixed - 不要加在
body或全局 layout 容器上——那会把整个页面变成一个“大结界”，反而加剧冲突 - 如果该容器外层已有 opacity、transform 或 filter，优先隔离内层，而不是试图修改外层（通常改不了）
为什么加了 isolation: isolate 子元素还是被盖住？
根本原因：isolation: isolate 只创建新层叠上下文，但这个“新根”自身在外部的层级，仍由它自己的 position 和 z-index 决定。若容器没定位、z-index 是 auto，它在外部默认就是 0 层，内部再高的 z-index 也出不去。
- 必须同时加
position: relative（或其他定位值）和明确的z-index（如z-index: 100） - 用 Chrome DevTools 的 «Layers» 面板检查：该节点是否真的显示为 “Stacking Context Root”
- 避免嵌套：别在已设
opacity: 0.99的父容器里再套一个隔离容器——两层上下文叠加会让层级更难理清
isolation: isolate 和 transform/opacity 触发上下文的区别
老办法如 transform: translateZ(0) 或 opacity: 0.99 确实也能建上下文，但副作用明显：
-
opacity: 0.99会让子元素继承透明度，影响可访问性，还可能让文字模糊 -
transform: translateZ(0)强制 GPU 合成，在 Safari 中易与will-change冲突，滚动时字体发虚 -
isolation: isolate零视觉变化、零性能扰动，语义清晰，只干“划界”这一件事
但它不兼容 Safari 14 及更早版本，需补前缀：-webkit-isolation: isolate；且永远别写成 isolation: on 或 isolation: true——只有 isolate 是有效值。
mix-blend-mode 混合污染？isolation 是边界，不是开关
当你在编辑器里做语法高亮，用了 mix-blend-mode: multiply 却发现关键字和 body 背景混出奇怪色块，这不是 bug，是混合跨了上下文。加 isolation: isolate 后，混合只发生在容器内部兄弟之间，不再穿透到导航栏或侧边栏。
- 它不改变
mix-blend-mode的值，也不禁用混合，只是划定混合范围 - 如果容器本身不需要参与外层堆叠（比如纯内容区），可省略
z-index，但position仍不可少 - 注意：它对
background-blend-mode无效，只约束mix-blend-mode的作用域
真正复杂的地方在于：它不提升任何东西，只定义范围。你得自己决定这个范围划在哪、多大、要不要对外暴露层级——它从不替你做判断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
