CSS 属性

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

属性值

  • auto: 这是默认值。它表明元素的内容不会创建新的堆叠上下文。相反，它继承其父级的堆叠上下文。

  • isolate: 该值表示该元素创建一个新的堆叠上下文，将其内容与文档的其余部分隔离。这意味着该元素的内容将独立于其同级元素和父元素而呈现。

适用范围

所有元素。在 SVG 中，它适用于容器元素、图形元素和图形引用元素。

语法

isolation: auto | isolate;

CSS isolation: 自动值

以下示例演示了创建新堆栈上下文的isolation:auto 属性。 mix-blend-mode：差异从底部颜色中减去顶部颜色并创建高对比度效果 -

<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>
   <div  class="container">
      <div class="box1">
         <h3 class="container box2">isolation: auto;</h3>
      </div>
   </div>
</body>
</html>

CSS isolation: 隔离值

以下示例演示了isolation：isolate属性，该属性为box1创建新的堆叠上下文，防止box1与外部元素混合，并且应用于box2的混合模式不会影响box1内的元素 -

mix-blend-mode: Difference 属性从底部颜色中减去顶部颜色并创建高对比度效果。

<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>
   <div  class="container">
      <div class="box1">
         <h3 class="container box2">isolation: isolate;</h3>
      </div>
   </div>
</body>
</html>