CSS辞書

isolation

背景・装飾

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

構文

Syntax
isolation: auto | isolate

コード例

1

isolation: isolate;

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

2

isolation: auto;

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

💡 TIPS

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

⚠️ よくある間違い

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

🤖 AIがよく間違えるポイント

isolation: isolateは「副作用なしで新しいスタッキングコンテキストを作る」唯一の専用プロパティです。ブレンドモードの範囲区切りのほか、「子のz-indexが外部と干渉する」問題をコンポーネント境界で断ち切る用途にも有効——AIはz-index問題にこの解を出せないことが多いです。

💬 AIへの頼み方

コンポーネント内のz-indexが他と干渉しないよう、isolationで境界を作る設計にして

そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。

関連プロパティ

ブラウザサポート

Baseline 広く利用可能
Chrome
41+
Firefox
36+
Safari
8+
Edge
79+