CSSのz-indexの確認や管理を便利にする方法

何かと管理が面倒で、ややこしいことになりがちなz-indexですが、今回はそんなz-indexを確認したり管理するのに役立つ情報をまとめておきます。

Chrome拡張機能：DevTools z-index

Chrome拡張機能のDevTools z-indexを使うと、z-indexが設定されている要素とその値がリストで表示されます。

インストールするだけで［Elements］に［z-index］タブが追加され、そこから並びと設定されてある値まで分かります。

Webrandum

「DevTools z-index」でz-indexがかかっている要素をChrome開発者ツールに一覧表示...

https://webrandum.net/devtools-z-index

CSSで設定しはじめるとややこしいのがz-index、どの要素にどれだけの値が設定されているのか分からず、「とりあえずz-index:999999;にしておこう」となりがちです。そんな風にその場のノリで設定していると、いつの間にかどんどん値が大きくなって管理が大変になります。今回は現在表示しているページの、どの要素にz-indexがかかっているのか一覧で表示できるChrome拡張機能の「DevTools z-index」について紹介します。DevTools z-indexのインストール「DevTools z-index」はChromeウェブストアからインストールできます。他のChrome...

Chrome開発者ツール：Layers

Chrome開発者ツールに元から備わっている機能で、ウェブサイト上のz-indexの関係を立体的に確認できます。

使い方は、Chrome開発者ツールを開いて、右上の3点をクリックして［More tools］→［Layers］で新しく「Layers」タブが追加されます。

あとはその「Layers」タブへ移動して、回転アイコンを選択してドラッグすると、サイト上を立体的に見れます。

z-indexの値が大きくなるほど、距離は離れるようになっているので、どの要素の上にどの要素が来ているのかも視覚的に分かりやすく確認できます。

マップで管理する

SCSSのマップ機能を使うと、簡単にz-indexの管理ができます。

// z-indexの並び順
$z-list: (
  header, 
  nav,
  pulldown, 
  child
);

// 関数の定義
@function z($name) {
  @return index($z-map, $name);
}

// 関数の使用例
.header {
  z-index: z(header); // 1
}
.child {
  z-index: z(child); // 4
}

マップ内の順番がそのままz-indexの値になります。
並びを変えたいときは$z-listのマップ内の順を変えるだけで済むので、管理がかなりラクになります。

さらに入れ子などにも対応した管理方法も下記で紹介されています。

Qiita

Sassを使ったz-indexの管理 - Qiita

https://qiita.com/kojika17/items/b4694e3afe0da97e6335

Sass(SCSS)を使ったz-indexの管理には、Sassy Z-Index Management For Complex Layouts – Smashing Magazine を使っていた。$z: header, nav,...