# isolation

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

- カテゴリ: 背景・装飾
- URL: https://www.css-dictionary.com/property/isolation/

## 構文

```css
isolation: auto | isolate
```

## ブラウザ対応

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

## コード例

### 例1: 新しいスタッキングコンテキストを作成

```css
isolation: isolate;
```

### 例2: 通常の動作（デフォルト）

```css
isolation: auto;
```

## TIPS

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

## よくある間違い

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

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

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

## AIへの依頼文例

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

## 関連プロパティ

- [mix-blend-mode](https://www.css-dictionary.com/property/mix-blend-mode.md)
- [z-index](https://www.css-dictionary.com/property/z-index.md)
- [transform](https://www.css-dictionary.com/property/transform.md)