加 isolation: isolate 本身不解决遮挡问题，它只创建新层叠上下文；必须同时配 position 和 z-index，否则容器自身仍在 stacking level 0 最底层，内部再高的 z-index 也出不去。
加 isolation: isolate 本身不解决遮挡问题，它只创建新层叠上下文；必须同时配 position 和 z-index，否则容器自己还在最底层。
为什么加了 isolation: isolate 子元素还是被盖住
因为 isolation: isolate 不抬高容器自身在外部的层级，只划定内部 z-index 的比较范围。如果该容器是 position: static、没设 z-index，它在父级中默认处于 stacking level 0 —— 内部再高的 z-index 也出不去。
- 必须给容器加
position: relative（或absolute/fixed），否则z-index无效 -
z-index值不用很大，只要比遮挡它的兄弟容器高即可（比如z-index: 100） - 用 Chrome DevTools 的 «Layers» 面板确认该节点是否显示为 “Stacking Context Root”
isolation: isolate 必须加在谁身上才生效
它只对**块级或已定位的直接父容器**有效，加错位置等于没写。
- 不能加在子元素上（如
.tooltip-content或.dropdown-menu），得加在它们的紧邻父容器（如.tooltip或.dropdown） - 不能加在
display: inline元素上（如），浏览器会静默忽略 - 不能加在隔了两层以上的祖先上（如全局
.layout），否则隔离范围过大，反而加剧冲突 - 确保该容器是
display: block/flex/grid，或已设position
哪些操作会让 isolation: isolate 静默失效
不是代码写错了，而是祖先链上已有其他属性提前创建了层叠上下文，把你的隔离容器“包进去了”。
- 祖先元素用了
opacity: 0.99、transform: scale(1)、filter: blur(0)或will-change: transform - iOS Safari 对
position: fixed元素自动建上下文，可能让隔离失效 - Safari 15.4 之前必须加前缀：
-webkit-isolation: isolate - 误写成
isolation: on或isolation: true—— 只有isolate和auto是合法值
和 mix-blend-mode 配合时的关键点
isolation: isolate 是阻止混合“漏出去”的最小代价方案，但它不是开关，而是边界声明。
- 必须加在使用
mix-blend-mode的子元素的**直接父容器**上，不是加在子元素本身 - 该父容器需满足：块级行为 + 非
static的position - 若该容器本身也要浮起（如弹窗标题栏），还得额外配
z-index - 加了之后，混合只发生在容器内部兄弟之间，不再和
body背景、导航栏等外部元素混色
最容易被忽略的是：加了 isolation: isolate 只是划了边界，而这个“边界”在页面中的物理位置和层级，完全由它自身的 position 和 z-index 决定 —— 没站稳脚跟，就谈不上隔离。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
