CSS - isolation 属性

CSS isolation 属性用于控制元素的内容在其父元素和同级元素中关于渲染和堆叠上下文如何交互。它本质上决定了一个元素是否建立新的堆叠上下文。

语法

isolation: auto | isolate | initial | inherit;

属性值

值	描述
auto	这表示元素的内容不会创建新的堆叠上下文。相反，它继承其父元素的堆叠上下文。默认值。
isolate	此值表示元素创建一个新的堆叠上下文，将其内容与文档的其余部分隔离开。这意味着元素的内容将独立于其同级元素和父元素进行渲染。
initial	它将属性设置为其默认值。
inherit	它从父元素继承属性。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

CSS isolation 属性示例

以下示例解释了使用不同值的 isolation 属性。

使用 auto 值的 isolation 属性

以下示例演示了 isolation 属性的 auto 值，它不会创建新的堆叠上下文。mix-blend-mode: difference 将顶部颜色从底部颜色中减去，从而产生高对比度效果。

示例

Open Compiler

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         background-color: yellow;
         width: 250px;
         height: 200px;
         padding: 5px;
      }
      .box2 {
         width: 130px;
         height: 130px;
         border: 5px solid red;
         padding: 5px;
         mix-blend-mode: difference;
         margin-left: 50px;
      }
      .box1 {
         isolation: auto;
      }
   </style>
</head>

<body>
   <h2>
      CSS isolation Property
   </h2>
   <h4>
      isolation: auto
   </h4>
   <div  class="container">
      <div class="box1">
         <h3 class="container box2">
            isolation: auto;
         </h3>
      </div>
   </div>
</body>
</html>

使用 isolate 值的 isolation 属性

以下示例演示了 isolation 属性的 isolate 值，它为 box1 创建一个新的堆叠上下文，防止 box1 与外部元素混合，并且应用于 box2 的混合模式不会影响 box1 内部的元素。mix-blend-mode: difference 属性将顶部颜色从底部颜色中减去，从而产生高对比度效果。

示例

Open Compiler

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         background-color: yellow;
         width: 250px;
         height: 200px;
         padding: 5px;
      }
      .box2 {
         width: 130px;
         height: 130px;
         border: 5px solid red;
         padding: 5px;
         mix-blend-mode: difference;
         margin-left: 50px;
      }
      .box1 {
         isolation: isolate;
      }
   </style>
</head>
<body>
   <h2>
      CSS isolation Property
   </h2>
   <h4>
      isolation: isolate
   </h4>
   <div  class="container">
      <div class="box1">
         <h3 class="container box2">
            isolation: isolate;
         </h3>
      </div>
   </div>
</body>
</html>

支持的浏览器

属性
isolation	41.0	79.0	36.0	8.0	30.0

css_properties_reference.htm

打印页面