isolation CSS プロパティは、要素が新しい stacking context を生成すべきかどうかを定義します。

/* Keyword values */
isolation: auto;
isolation: isolate;

/* Global values */
isolation: inherit;
isolation: initial;
isolation: unset;

これは、与えられたスタッキングコンテクストで背景をブレンドするだけの background-blend-mode とともに使うと特に役立ちます。より深い背景から要素のグループを分離し、背景色を一緒にブレンドできます。

初期値auto
適用対象全要素. In SVG, it applies to container elements, graphics elements, and graphics referencing elements.
継承不可
メディアvisual
計算値指定値
Animation typediscrete
正規順序形式文法で定義される一意のあいまいでない順序

構文

以下のリストのキーワードのいずれか。

auto
要素に適用された或るプロパティに必要な場合にのみ、新しいスタッキングコンテキストを作成する必要があることを示すキーワード。
isolate
新しいスタッキングコンテクストが必ず生成される必要があることを示すキーワード。

形式的構文

auto | isolate

<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>
.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;
}

仕様

仕様 ステータス コメント
Compositing and Blending Level 1
Isolation の定義
勧告候補 初期定義

ブラウザー実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート

41.0

36 (36) 未サポート 30 7.1
機能 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート

41.0

36.0 (36) 未サポート 36 8.0

関連項目

ドキュメントのタグと貢献者

 このページの貢献者: YuichiNukiyama
 最終更新者: YuichiNukiyama,