isolation

背景・装飾

新しいスタッキングコンテキストを作成し、ブレンドモードの影響範囲を制限するプロパティです。mix-blend-modeやbackground-blend-modeの効果を特定の要素内に封じ込めるのに使用します。

構文

Syntax
isolation: auto | isolate

コード例

1

isolation: isolate;

新しいスタッキングコンテキストを作成

2

isolation: auto;

通常の動作(デフォルト)

💡 TIPS

mix-blend-modeやz-indexの影響範囲を制御したい時に使う。意図しない要素とのブレンドを防げる。

⚠️ よくある間違い

効果が視覚的に分かりにくいプロパティ。ブレンドモードを使う親要素に指定することが多い。

関連プロパティ

ブラウザサポート

Chrome 41+, Firefox 36+, Safari 8+