isolation

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

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

参见