isolation: isolate 是轻量无副作用的层叠上下文创建方式；它不改变位置、尺寸或透明度，仅隔离层级，需配合 position 且不适用于 inline 元素，其 z-index 仅在最近已创建上下文中生效。
isolation: isolate 是一个轻量、明确且副作用小的创建层叠上下文的方式，比 transform 或 opacity 更干净——它不改变元素位置、尺寸或透明度，只单纯“划出一块独立层级区域”。
为什么用 isolation 而不是 transform 或 opacity
很多开发者习惯用 transform: translateZ(0) 或 opacity: 0.99 强行触发层叠上下文，但这些写法有隐性代价：
-
transform可能触发重绘/重排，尤其在动画中易引发性能抖动 opacity 会削弱可访问性（屏幕阅读器可能降权），且影响子元素继承行为- 两者都会意外改变视觉表现（哪怕肉眼难察），而
isolation: isolate完全无视觉副作用
isolation: isolate 的生效条件和限制
它只在以下情况真正创建新层叠上下文：
- 元素本身
position值为relative、absolute、fixed或sticky（否则z-index仍无效） - 父容器未设置
will-change: transform等提前创建上下文的属性（否则隔离效果被覆盖） - 不能用于
display: inline元素（需是块级或 flex/grid item）
注意：isolation: auto（默认值）不创建上下文；只有显式设为 isolate 才起作用。
常见误用：isolation 无法穿透父级上下文
即使你给子元素加了 isolation: isolate，它的 z-index 依然只在**最近的已创建上下文内生效**。例如：
.parent { position: relative; z-index: 1; }
.child { position: absolute; z-index: 9999; isolation: isolate; }
.unrelated { position: absolute; z-index: 2; }
此时 .child 的 z-index: 9999 并不会盖过 .unrelated，因为 .parent 已创建上下文，.child 的层级只在 .parent 内部有效。
什么时候该用 isolation: isolate
适合需要「局部层级自治」但又不想污染全局结构的场景：
- 组件库中封装弹窗、Tooltip，确保内部
z-index不受宿主页面干扰 - 地图容器内叠加 UI 控件（如缩放按钮、图例），避免被地图自身
transform创建的上下文锁死 - 使用 CSS 混合模式（
mix-blend-mode）时，防止混合效果被外层上下文截断
真正容易被忽略的一点：它不解决「跨上下文层级竞争」，只帮你把一块区域「封起来」——封得越早、越准，后续层级控制才越可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
