CSS3

：

プロパティ

：

isolation

　 編集：2022.07.14 by T.A.

→●、mdn

要素が新しい重ね合わせコンテキストを生成する必要があるかどうか。

名前 isolation
値 <isolation-mode>
初期値 auto
適用対象 すべての要素。SVG においては、コンテナ要素、グラフィックス要素、グラフィックスを参照する要素。[SVG11]
継承 されない
百分率 受容しない
算出値 指定値
正準的順序 文法に従う
アニメーション型 不可
<isolation-mode>
＝auto | isolate
auto
何れかのプロパティが必要な要素に適用された場合にのみ、新しい重ね合わせコンテキストが作成されます。
色：#6f6＝■
<DIV style="width:150px; height:150px; background-color:#bfb;">
  <DIV style="border:1px solid black;">
    <DIV style="width:100px; height:100px; border:1px solid black;
      mix-blend-mode:difference;
      background-color:#6f6;">auto
    </DIV>
  </DIV>
</DIV>
指定なし 

<DIV style="width:150px; height:150px; background-color:#bfb;">
  <DIV style="isolation:auto; border:1px solid red;">
    <DIV style="width:100px; height:100px; border:1px solid black;
      mix-blend-mode:difference;
      background-color:#6f6;">auto
    </DIV>
  </DIV>
</DIV>

isolate
新しい重ね合わせコンテキストが必ず作成されます。
<DIV style="width:150px; height:150px; background-color:#bfb;">
  <DIV style="isolation:isolate; border:1px solid red;">
    <DIV style="width:100px; height:100px; border:1px solid black;
      background-color:#6f6;">auto
    </DIV>
  </DIV>
</DIV>
mix-blend-mode:differenceなし 

<DIV style="width:150px; height:150px; background-color:#bfb;">
  <DIV style="isolation:isolate; border:1px solid red;">
    <DIV style="width:100px; height:100px; border:1px solid black;
      mix-blend-mode:difference;
      background-color:#6f6;">auto
    </DIV>
  </DIV>
</DIV>
¶意味わからない

HTML： 
<div id="b" class="a">
  <div id="d">
    <div class="a c">auto</div>
  </div>
  <div id="e">
    <div class="a c">isolate</div>
  </div>
</div>
CSS： 
.a {
  background-color: rgb(0,255,0);
}
#b {
  width: 200px;
  height: 210px;
}
.c {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  padding: 2px;
  mix-blend-mode: difference;
}
#d {
  isolation: auto;
}
#e {
  isolation: isolate;
}
テスト
HTML：

ここに表示
HTML：

ここに表示
スクリプト：


スクリプト：



表示内容：
表示内容：