隔离属性
最后更新：2026-09-13
isolation 隔离属性
isolation 用于控制元素是否创建新的层叠上下文（stacking context）。当设置为 isolate 时，该元素会形成一个独立的混合环境，使其子元素的 mix-blend-mode 只与元素内部的内容混合，而不会穿透到外部元素。它是精确控制混合模式范围的关键属性。
| 分类 | |
|---|---|
| 初始值 | auto |
| 继承 | 否 |
| 适用于 | |
| 可动画 | |
| CSS 版本 | CSS3 |
| 状态 | 标准 |
📝 语法
isolation: auto | isolate;⚙️ 取值
| 值 | 类型 | 描述 |
|---|---|---|
auto | isolate | 关键字 | 是否创建新的层叠上下文 |
▶ 示例
编辑下方代码，在 playground 中查看实时效果：
🌐 浏览器支持
| 浏览器 |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| isolation | ✓ v43 | ✓ v12 | ✓ v36 | ✓ v9 | ✓ v30 |
| 所有主流浏览器均支持 | |||||
提示： isolate 最常见的用途就是配合 mix-blend-mode 使用，防止混合效果穿透到不希望影响的元素。
❓ 常见问题
Q哪些属性会创建层叠上下文？
A常见的有：position + z-index 非 auto、opacity 小于 1、transform 非 none、filter 非 none、mix-blend-mode 非 normal、will-change 指定等。isolation: isolate 主动创建层叠上下文，把混合与层叠隔离在自身内。
Qisolation 的 auto 和 isolate 有什么不同？
Aauto 不主动创建层叠上下文，元素参与父级的层叠环境，其子元素的 mix-blend-mode 可以越过它与更外层内容混合；isolate 强制创建新的层叠上下文，把混合范围限制在元素内部，子元素只与元素内部内容混合，不会「漏」到外面。需要精确控制混合边界时用 isolate。
Qisolation: isolate 除了混合模式还有别的用途吗？
A凡是需要隔离层叠关系的地方都能用：防止子元素的混合模式影响外部、限制 z-index 比较的范围、让元素内部的定位/层级不再与外部相互干扰、配合 contain: paint 优化渲染性能。本质上 isolate 提供了一种不依赖 z-index/opacity 的「干净」的层叠上下文创建方式。
Qisolation 和 z-index 有什么区别？
Az-index 只能在定位元素上设置，用来调整层叠顺序，值越大越靠上；isolation: isolate 不改变元素的上下顺序，只创建一个隔离边界，把内部层叠与外部隔开。两者都涉及层叠上下文，但 z-index 管「谁在上」，isolation 管「边界在哪」。
🏷️ 相关属性
💡 相关案例
📚 相关教程
