うさぎのメモ帳

わかりやすい z-index の管理方法

2019年10月04日 - 2019年10月08日

スタック文脈の基礎知識

z-indexを使いこなすには『スタック文脈 (or 積み重ねコンテキスト or スタッキングコンテキスト)』の知識が必須で、以下のような記事が参考になります。

特に注意したいのは、

  • transformを付与しただけで新しいスタック文脈を形成する
  • 子要素は親要素のスタック文脈に依存する

になります。CSSでもGSAPでもアニメーションさせるときに、よくtransform使いますしね。
z-indexが効かないときには親要素のスタック文脈を見直したり階層を上げ下げして解決することになります。

z-indexの指定方法

z-indexの指定がCSSソース上に散らばるとDOMの重なり順がわかりづらくなります。
そこでz-index専用のセレクタ (.z-*) を用いて管理すると楽でした。

z-index.css

.z-mouse-stalker {
  z-index: 100;
}

.z-loader {
  z-index: 90;
}

.z-menu {
  z-index: 2;
}

.z-fixed-home {
  z-index: 2;
}

.z-intro {
  z-index: 4;
}

.z-intro_text {
  z-index: 1;
}

.z-home-kv {
  z-index: 1;
}

.z-detail-title {
  z-index: 1;
}

.z-detail-desc {
  z-index: 1;
}

.z-fixed-side-word {
  z-index: 0;
}

既存のクラスにz-indexを指定しない理由

上記の指定方法なら.z-*プレフィックスを付与せずに、

z-index.css

.mouse-stalker {
  z-index: 100;
}

.loader {
  z-index: 90;
}

.menu {
  z-index: 2;
}

.fixed-home {
  z-index: 2;
}
...

のように指定してもよさそうに見えますが、z-*プレフィックスのある方が、HTMLが階層構造になっている場合でも上位のクラス名を意識することなく指定できるのでオススメです。

例えば以下のHTMLの場合に、

index.html

<div class="menu">
  <section class="section" /> <!-- z-index: 3 を付けたい -->
</div>

<div class="home">
  <section class="section" /> <!-- z-index: 2 を付けたい -->
</div>

z-index.css

.home > .section {
  z-index: 3;
}

.menu > .section {
  z-index: 2;
}

とするよりも、

index.html

<div class="menu">
- <section class="section" /> <!-- z-index: 3 を付けたい -->
+ <section class="section z-menu-section" />
</div>

<div class="home">
- <section class="section" /> <!-- z-index: 2 を付けたい -->
+ <section class="section z-home-section" />
</div>

z-index.css

.z-menu-section {
  z-index: 3;
}

.z-home-section {
  z-index: 2;
}

の方がわかりやすく、変更に強い指定方法になるためです。