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

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