Css 简明教程

CSS - isolation

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

Possible Values

  1. auto − 这是默认值。它表示元素的内容不创建一个新的堆叠上下文。相反，它继承了其父级的堆叠上下文。

  2. isolate − 此值表示元素创建一个新的堆叠上下文，将其内容与文档的其余部分隔离。这意味着元素的内容将独立于其兄弟元素和父元素进行渲染。

Applies To

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

Syntax

isolation: auto | isolate;

CSS isolation - auto Value

以下示例演示了 isolation: auto 属性如何新建一个堆叠上下文。｛@s4｝ 减去底色顶部颜色，并产生高对比度效果 −

<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 - isolate Value

以下示例演示了 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>