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-modez-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

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
isolation

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

参见