CSS isolation: isolateを使ったz-index制御

isolationプロパティ

isolationプロパティは、視覚的な副作用なしに新しいスタッキングコンテキストを作成する最もクリーンな方法です。opacity: 0.99やtransform: translateZ(0)とは異なり、isolation: isolateはスタッキングコンテキストを作成するという1つのことだけを行います。

構文

.component {
  isolation: isolate;
}

なぜisolationを使うのか？

コンポーネントライブラリを構築する際、各コンポーネントの内部z-index値がスコープされて外に漏れないようにしたいです。isolationがないと、コンポーネントA内のツールチップがコンポーネントB内のドロップダウンと競合する可能性があります：

/* isolationなし — z-indexがコンポーネント間で漏れる */
.component-a .tooltip { z-index: 100; }
.component-b .dropdown { z-index: 50; }
/* tooltipは異なるコンポーネントにあるにもかかわらずdropdownの上に表示される */

/* isolationあり — 各コンポーネントが自己完結型 */
.component-a {
  isolation: isolate;
}
.component-b {
  isolation: isolate;
}
.component-a .tooltip { z-index: 100; } /* component-aにスコープ */
.component-b .dropdown { z-index: 50; } /* component-bにスコープ */

isolationを使った推奨z-indexスケール

:root {
  --z-base: 0;
  --z-raised: 1;
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-overlay: 30;
  --z-modal: 40;
  --z-toast: 50;
  --z-tooltip: 60;
}

/* 各コンポーネントのルートにisolationを設定 */
.card { isolation: isolate; }
.sidebar { isolation: isolate; }
.header { isolation: isolate; }

ブラウザサポート

isolation: isolateはChrome、Firefox、Safari、Edgeを含むすべてのモダンブラウザでサポートされています。IE11では効果がありませんが、IE11はそもそも多くのスタッキングコンテキスト機能をサポートしていません。