CSS - isolation 屬性



CSS isolation 屬性用於控制元素的內容在其父元素和同級元素中關於渲染和堆疊上下文如何互動。它本質上決定了一個元素是否建立新的堆疊上下文。

語法

isolation: auto | isolate | initial | inherit;

屬性值

描述
auto 這表示元素的內容不會建立新的堆疊上下文。相反,它繼承其父元素的堆疊上下文。預設值。
isolate 此值表示元素建立一個新的堆疊上下文,將其內容與文件的其餘部分隔離開。這意味著元素的內容將獨立於其同級元素和父元素進行渲染。
initial 它將屬性設定為其預設值。
inherit 它從父元素繼承屬性。

CSS isolation 屬性示例

以下示例解釋了使用不同值的 isolation 屬性。

使用 auto 值的 isolation 屬性

以下示例演示了 isolation 屬性的 auto 值,它不會建立新的堆疊上下文。mix-blend-mode: difference 將頂部顏色從底部顏色中減去,從而產生高對比度效果。

示例

<!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 屬性將頂部顏色從底部顏色中減去,從而產生高對比度效果。

示例

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

支援的瀏覽器

屬性 Chrome Edge Firefox Safari Opera
isolation 41.0 79.0 36.0 8.0 30.0
css_properties_reference.htm
廣告