isolation: isolate必须加在目标元素的直接父容器上，且该容器需为块级或已定位元素；仅划边界不抬高度，故还需配合position和z-index才能生效，否则仍处于层叠底层。
isolation: isolate 加在谁身上才生效
它只对**块级或已定位的直接父容器**有效，加在子元素、inline 元素或隔了两层的祖先上，浏览器会静默忽略。比如弹窗按钮被遮住，不能给 button 加，也不能给外层的 .layout 加——得找它紧贴着的父 div，例如 .modal-footer 或 .dropdown-menu。
常见错误写法：.tooltip-content { isolation: isolate; }（实际该加在 .tooltip 上）；.btn { isolation: isolate; }（button 是行内元素，不支持）。
为什么加了 isolation 还是被盖住
isolation: isolate 只划边界，不抬高度。它让内部 z-index 有独立比较空间，但容器自己仍在默认层叠层级（stacking level 0），也就是最底层。
- 必须同时加
position: relative（或其他非static值）和显式z-index（如z-index: 100） - 数值不用很大，只要比遮挡它的兄弟容器高即可
- 用 Chrome DevTools 的 «Layers» 面板确认该节点是否显示为 “Stacking Context Root”
哪些属性会悄悄让 isolation 失效
如果祖先链上已有 opacity: 0.99、transform: scale(1)、filter: blur(0) 或 will-change: transform，它们会提前创建层叠上下文，把你的 isolation: isolate 容器包进去——结果不是隔离，而是扩大了混合或层级影响范围。
移动端尤其敏感：iOS Safari 对 position: fixed 元素自动建上下文；Safari 15.4 之前必须加前缀：-webkit-isolation: isolate。
检查方法：DevTools → Elements → 选中容器 → Styles 面板搜 “stacking context”，或看 Layers 面板是否真成了新根节点。
mix-blend-mode 被污染时怎么用 isolation 止血
当 mix-blend-mode 和不该混的背景（比如 body 灰色底、导航栏、父容器背景）一起算颜色，就是“背景污染”。isolation: isolate 是副作用最小的止血方案，但它必须加在混合内容的**直接父容器**上，且该容器需满足：
-
display是block/flex/grid等块级行为 -
position不是static（哪怕只是position: relative） - 若该容器本身也要浮起（如弹窗标题栏），还得配
z-index
别误写成 isolation: on 或 isolation: true——只有 isolate 和 auto 是合法值，auto 是默认值，等于没写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
