Css 简明教程

CSS - isolation

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

CSS isolation property is used to control how an element’s content interacts with its parent and sibling elements in terms of rendering and stacking context. It essentially determines whether an element establishes a new stacking context or not.

Possible Values

  1. auto − This is the default value. It indicates that the element’s content does not create a new stacking context. Instead, it inherits the stacking context of its parent.

  2. isolate − This value indicates that the element creates a new stacking context, isolating its content from the rest of the document. This means that the element’s content will be rendered independently of its siblings and parent elements.

Applies To

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

All elements. In SVG, it applies to container elements, graphics elements, and graphics referencing elements.

Syntax

isolation: auto | isolate;

CSS isolation - auto Value

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

The following example demonstrates the isolation: auto property creating a new stacking context. The mix-blend-mode: difference subtracts the top color from the bottom color and creating in a high-contrast effect −

<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 中的元素 −

The following example demonstrates the isolation: isolate property that creates a new stacking context for box1, preventing the box1 from blending with external elements and the blend mode applied to box2 doesn’t impact elements inside box1 −

mix-blend-mode: difference 属性将顶层颜色减去底色，并产生高对比度效果。

The mix-blend-mode: difference property subtracts the top color from the bottom color and creating high-contrast effect.

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