新しいスタッキングコンテキストを作成し、ブレンドモードの影響範囲を制限するプロパティです。mix-blend-modeやbackground-blend-modeの効果を特定の要素内に封じ込めるのに使用します。
isolation: auto | isolateisolation: isolate;新しいスタッキングコンテキストを作成
isolation: auto;通常の動作(デフォルト)
mix-blend-modeやz-indexの影響範囲を制御したい時に使う。意図しない要素とのブレンドを防げる。
効果が視覚的に分かりにくいプロパティ。ブレンドモードを使う親要素に指定することが多い。
isolation: isolateは「副作用なしで新しいスタッキングコンテキストを作る」唯一の専用プロパティです。ブレンドモードの範囲区切りのほか、「子のz-indexが外部と干渉する」問題をコンポーネント境界で断ち切る用途にも有効——AIはz-index問題にこの解を出せないことが多いです。
コンポーネント内のz-indexが他と干渉しないよう、isolationで境界を作る設計にして
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。