isolation: isolate能强制创建新层叠上下文，但仅隔离边界、不提升父容器自身层级；它无性能副作用，兼容Chrome 52+/Firefox 50+/Safari 15.4+，需配合父元素position和z-index才能真正生效。
isolation: isolate 确实能强制创建新堆叠上下文，但它不是 z-index 的“万能放大器”——它只划边界，不改规则。
什么时候必须用 isolation: isolate 而不是靠 z-index 硬堆
当父容器已带 opacity: 0.99、transform: scale(1) 或 filter: blur(0) 这类隐式触发堆叠上下文的属性，但你又不能删它们（比如动画/视觉效果必需），此时子元素的 z-index 再大也出不了这个“结界”。isolation: isolate 是显式声明，比隐式触发更可控，且不附带性能副作用（不像 transform: translateZ(0) 可能导致字体发虚或滚动卡顿）。
常见场景包括：
- 导航栏下拉菜单被歌单推荐面板遮挡（QQ音乐网页版典型问题）
- Modal 遮罩层被带
opacity的卡片背景盖住 - Tooltip 浮层在
will-change: transform的轮播图容器里失效
为什么加了 isolation: isolate 子元素还是被盖住
根本原因在于：isolation: isolate 只让该元素成为新堆叠上下文的根，但这个“根”自身在外部的层级，仍由它自己的 position 和 z-index 决定。如果 .container 自身 z-index: auto 或没定位，它在外部上下文中默认层级是 0，哪怕内部子元素设了 z-index: 9999，整个盒子仍可能被 z-index: 10 的兄弟元素压着。
正确做法是：
- 给隔离容器本身加
position: relative和明确的z-index（如z-index: 100） - 避免在它上面再套一个已触发堆叠上下文的父级（比如外层还有
opacity: 0.8） - 用 Chrome DevTools 的 «Layers» 面板确认该容器是否真的成了上下文根节点
兼容性和写法细节不能漏
Safari 14 及更早版本不支持原生 isolation: isolate，必须加前缀：
nav-container {
-webkit-isolation: isolate;
isolation: isolate;
}
另外注意：isolation: auto 是默认值，不创建新上下文；isolation: isolate 是唯一有效触发值，没有 isolation: on 或其他变体。它对 mix-blend-mode 也有隔离作用，但若只为了层级控制，不必额外加这个属性。
和 opacity/transform 触发的上下文有啥区别
本质一样：都创建新堆叠上下文。但关键差异在“副作用”：
-
opacity: 0.99会改变透明度，哪怕只是 0.01 的差值 -
transform: translateZ(0)强制硬件加速，可能引发字体渲染异常或 Safari 中will-change行为错乱 -
isolation: isolate什么也不画、不移、不缩、不透明，就干一件事：立边界
所以当你只想解决层级隔离，又不想动视觉表现或性能，它就是最干净的选择——但别指望它自动把整个盒子“提”到顶层，那还得靠它自己的 z-index。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
