isolation: isolate 是干什么的？为什么不用 transform 来创建层叠上下文？

用途一：把组件内部的 z-index 圈起来

组件里有个角标，为了盖住卡片图片写了 z-index: 10。页面上的吸顶导航是 z-index: 5，滚动时角标就从导航上面穿了过去。角标只需要压住自己卡片里的图片，却和整个页面比了层级。

.header {
  position: sticky;
  top: 0;
  z-index: 5; /* 吸顶导航 */
}

.card {
  isolation: isolate; /* 卡片自成一个层叠上下文 */
}

.card .badge {
  position: absolute;
  z-index: 10; /* 只在 .card 内部和图片比较 */
}

/* 没加 isolation：badge 的 10 和 header 的 5 比，badge 穿到导航上面
   加了之后：.card 整体按层级 auto 参与外部比较，排在 header 下面 */

设计系统里的用法

一些组件库会在组件根元素上默认加 isolation: isolate，这样组件内部可以放心用 1、2、3 这种小数字排层级，不会因为页面上别的地方写了 z-index: 9999 而出问题。这也是解决「z-index 越写越大」的一个办法：层级只在各自的层叠上下文内比较，数字就不用无限往上加。

用途二：限制 mix-blend-mode 的混合范围

isolation 这个属性最初就是为混合模式设计的。mix-blend-mode 会让元素和它背后所有已经画好的内容混合，一直混到最近的层叠上下文为止。

只和组件自己的背景混合

比如一个标题设了 mix-blend-mode: multiply，本意是和卡片的背景色混合，结果把页面背景图也混了进去，颜色完全不对。给卡片加上 isolation: isolate，卡片就成了混合的边界，标题只和卡片内部的内容混合，卡片外面的东西不参与。

为什么不用 transform 来创建

以前没有 isolation 或者大家不熟悉它时，常见的写法是 transform: translateZ(0)、opacity: 0.99 或者 position: relative 加 z-index: 0。它们都能创建层叠上下文，但各自带着额外的效果。

transform 的副作用

transform 不为 none 的元素会成为所有 position: fixed 后代的包含块。组件里如果有一个 fixed 定位的弹窗或遮罩，本来应该铺满视口，加了 transform 后就只铺满这个组件，而且会跟着组件一起滚动。这是实际项目里最常踩的坑。另外 translateZ(0) 常常会让浏览器把元素提升成单独的合成层，数量多了会占用显存。元素本来就有 transform 动画时，写死的 translateZ(0) 还可能被动画覆盖掉。

其他写法的问题

opacity: 0.99 会让元素有一点点透明，截图对比能看出来。position: relative 加 z-index: 0 相对干净，但它改了 position，会让元素成为 absolute 后代的包含块，原来相对更外层定位的子元素位置就变了。isolation: isolate 不改变任何这些，所以能放心加在任何元素上。

容易答错的地方

以为加了 isolation 元素就会浮到最上面

isolation 不改变元素自己在外部的层级。它只是把内部的层级「封装」起来，外部比较时整个组仍然按元素自己的 z-index 和文档顺序排。想让组件整体压在别人上面，还是要给组件本身设 z-index。

以为 isolation 会影响子元素的定位

它不会成为 absolute 或 fixed 后代的包含块，子元素的 top、left 参照谁，和加不加 isolation 没有关系。这正是它比 transform 好用的地方。

以为 isolation: auto 表示不创建上下文

auto 是默认值，意思是不因为 isolation 属性而创建层叠上下文。如果元素同时有 opacity: 0.5 或 transform，照样会创建。auto 不能「取消」其他属性带来的层叠上下文。

面试官还会怎么问？

把知识连起来