隔离

**isolation** CSS 属性决定元素是否必须创建一个新的堆叠上下文。

试一试

此属性在与mix-blend-mode 和z-index 结合使用时特别有用。

语法

css
/* Keyword values */
isolation: auto;
isolation: isolate;

/* Global values */
isolation: inherit;
isolation: initial;
isolation: revert;
isolation: revert-layer;
isolation: unset;

isolation 属性指定为下面列出的关键字值之一。

值

auto

仅当应用于元素的属性之一需要时，才会创建一个新的堆叠上下文。

isolate

必须创建一个新的堆叠上下文。

正式定义

初始值auto
应用于所有元素。在 SVG 中，它应用于容器元素、图形元素和图形引用元素。
继承否
计算值按指定
动画类型不可动画

正式语法

isolation = 
  <isolation-mode>  

<isolation-mode> = 
  auto     |
  isolate

示例

强制为元素创建一个新的堆叠上下文

HTML

html
<div class="big-square ">
  <div class="isolation-auto">
    <div class="small-square">auto</div>
  </div>
  <div class="isolation-isolate">
    <div class="small-square">isolate</div>
  </div>
</div>

CSS

css
.isolation-auto {
  isolation: auto;
}

.isolation-isolate {
  isolation: isolate;
}

.big-square {
  background-color: rgb(0, 255, 0);
  width: 200px;
  height: 210px;
}

.small-square {
  background-color: rgb(0, 255, 0);
  width: 100px;
  height: 100px;
  border: 1px solid black;
  padding: 2px;
  mix-blend-mode: difference;
}

结果

规范

规范
合成和混合级别 2
# 隔离

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅