Z-indexの重なり順はコンテンツ量の少ないページだと管理は楽ですが、複数ページになってくると重なり順が分からなくなって管理が複雑になってしまいます。

管理が複雑になると修正がやりにくくなり、保守性のないコードになってしまいます。

そうならないために、今回は「Z-indexの重なり順を見やすく管理する方法」について解説します。

【CSS】Z-indexの重なり順を見やすく管理する方法

デモサイトはこちら。

See the Pen
Untitled by webis (@webis-co)
on CodePen.

それでは解説していきます。

①Z-indexを使うパーツを変数でまとめる

まずはZ-indexで重なり順を調整したいパーツを変数で1箇所にまとめます。

$layer: (
    header: 5,
    nav-toggle: 15,
    floating: 10
);

今回は$layerといったマップ名の中に、header(ヘッダー)・nav-toggle(三本線のボタン)・floating(トップへ戻るボタン)の3つのパーツを変数でまとめました。

文字列と数値は自由に変えてOKです。

②map-get関数を使う

変数をまとめることが出来たら、Z-indexの値を指定したい箇所にmap-get関数を指定します。

例えば、header(ヘッダー)にZ-indexの値を指定する場合は以下のようなコードになります。

.header {
    position: fixed;
    width: 100%;
    z-index: map-get($layer, "header");
}

map-get関数の中には「$マップ名」と「”パーツの変数名”」を指定します。

headerの場合だと、$マップ名は$layerでパーツの変数名はheaderになります。

nav-toggle(三本線のボタン)であれば以下のようにコードを書きます。

#nav-toggle {
    position: fixed;
    z-index: map-get($layer, "nav-toggle");
}

floating(トップへ戻るボタン)であれば以下のようにコードを書きます。

.floating {
    position: fixed;
    z-index: map-get($layer, "floating");
}

Z-indexの値を指定したい箇所にmap-get関数を指定することが出来たら、後は①で作成した変数の数値を調整するだけです。

例えば、nav-toggleをheaderより下の階層に配置したい場合は、nav-toggleにheaderより小さい数値を指定してあげれば完了です。

まとめ

以上が、「Z-indexの重なり順を見やすく管理する方法」でした。

変数とmap-get関数を使うことで、Z-indexの管理がやりやすくなるので、是非導入してみてください。