isolation | WebworksTips

isolationは、要素のスタッキング・コンテキストを制御する。スタッキング・コンテキストとは、要素が重なり合った時の仮想的な奥行きを表す概念である。
例えば、背景色を持つボックスが重なった時に透過やブレンドが指定されていた場合に、コンテキストを維持するのか分離するのかを選択できる。

auto：既存のスタッキング・コンテキストを尊重する。初期値
isolate：新しいスタッキング・コンテキストを作成する

<div class="aka">
  <div style="isolation: auto;"> <!-- 子要素のdivが赤背景とブレンドされる -->
    auto
    <div class="momo">背景色にpinkを指定</div>
    <div class="ao">背景色に半透明のblueを指定</div>
  </div>
  <div style="isolation: isolate;"> <!-- 子要素のdivは赤背景とブレンドされない -->
    isolate
    <div class="momo">背景色にpinkを指定</div>
    <div class="ao">背景色に半透明のblueを指定</div>
  </div>
</div>

div.aka {
  background-color: red;
  width: 50px;
  height: 300px;
}
div.momo {
  background-color: pink;
  width: 100px;
  mix-blend-mode: difference;
}
div.ao {
  background-color: blue;
  opacity: 0.5;
  width: 100px;
  mix-blend-mode: difference;
}