isolation

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

尝试一下

该属性与 mix-blend-mode 和 z-index 结合使用时尤其有用。

语法

css
/* 关键字值 */
isolation: auto;
isolation: isolate;

/* 全局值 */
isolation: inherit;
isolation: initial;
isolation: revert;
isolation: revert-layer;
isolation: unset;

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

值

auto

只有当应用于元素的某个属性需要时，才会创建一个新的层叠上下文。

isolate

必须创建新的层叠上下文。

形式定义

初始值auto
适用元素All elements. In SVG, it applies to container elements, graphics elements, and graphics referencing elements.
是否是继承属性否
计算值as specified
动画类型Not animatable

形式语法

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;
}

结果

规范

Specification
Compositing and Blending Level 2
# isolation

浏览器兼容性

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见