この記事はAteam Brides Inc. Advent Calendar 2019　14日目の記事です。

本日はWebデザイナーの@naomunaomuが担当いたします。

今回のお題はみんな大好きなz-indexについてです。
ハンバーガーメニューや、パララックスを制御するなど、レイアウトの順序を並び替えるのに便利ですよね

困ったらとりあえずz-index:9999にしていませんか？

はい、私はしていました・・
z-index:9999 とか、z-index:10000 とか、やっていました。
え？1から9999までの間の数字は全部使ってるかって？
ええ、当然使っていません。

カオスなz-index管理の末路

そんなざっくりした運用を続けると、どうなるかというと・・

クリックボタンがクリックできなくなります

「しまった、z-indexをどこに何回使ってるかわからない・・」
「z-index:999まで使ってったっけ・・えーい、9999でいけるはず！」
「あれ、変わらないぞ・・・？」

なぜこんなことが起きるのか

この問題には2つの原因があります。

1.スタックコンテキストへの理解
2.スタックレベルの乱用

1.スタックコンテキストへの理解

z-indexは、z-index:値の値（スタックレベル）に入る数字が大きい方が、重なり順が上に表示されます。

今回の例でいくと、後ろになってしまったクリックボタンはz-index:9999;、アイコンたちはz-index:999;です。
数値だけ見れば、クリックボタンの方が上にきそうですよね。

ここで問題になるのが、z-indexを記述しただけでは、重なり順は変わらないということです。

CSSにはスタックコンテキストという概念があります。

スタックコンテキストとは?

ざっくり言うとauto以外のz-indexと、static以外のpositionを指定した要素同士は重なり順が指定できるよ、というものです。
逆に言えば、それらを指定しなければz-indexは指定できないのです。

詳しくはこちらの記事が参考になりますので、ぜひご覧ください。
[CSS] z-index とスタックコンテキスト - Qiita

もし、「いやいや、z-indexとposition、ちゃんと設定してるのに、重なり順が変わらないよ・・＞＜」となる場合、
z-indexを指定したい要素同士が、入れ子になっている親要素にも、positionとz-indexを指定されているか確認してみましょう。

2.スタックレベルの乱用

z-index:値の値のことをスタックレベルと言います。
こちらを無秩序に使っていることが、今回の根本的な問題だと考えました。

スタックコンテキストを理解していても、
「しまった、z-indexをどこに何回使ってるかわからない・・」
上記は解決できないからです。
「とりあえず、困ったらz-index:9999で」
いやいや、z-index:9999、何回使うんじゃい、と。

今すぐz-index:9999を辞めるために検討したこと

次の3点から対応策を考えました。

1.ライブラリ、ツールの導入
2.Sassで一元管理
3.デザインガイドラインの制定

3の場合、運用でカバーする状況は極力避けたいので、
今後1,2で対応できた場合、その仕様を掲載しようかと思います。

1.ライブラリ、ツールの導入

Hide chrome frame in Layers view

弊社エンジニアが調べてくれました！

Chromeの検証ツールでサイトのレイヤー構造が3Dで確認できます。
デフォルトでは表示されないため、検証ツール右側のメニューボタン＞More tools＞Layersで表示してください。

３Dが面白くてぐるぐる遊びました笑が、今回のミッションであるスタックレベルの確認には使えないかな・・と、断念

2.Sassで一元管理

mixinでいい感じに作れないかなと調べていたところ、
こちらの記事が非常にわかりやすく参考になりました！
Sassy Z-Index Management For Complex Layouts — Smashing Magazine
Sassを使ったz-indexの管理 - Qiita

Sassのindex関数でスタックレベルを管理します。

まずサイト上で必要になる要素を作成します。

//必要になる要素の洗い出し
$elementes:(
  header,
  navigation,
  modal
)

設定した要素にindex番号を付与することで、設定した要素に上から1,2,3..とスタックレベルを割り振ることができます。

//index関数で呼び出し
@function z-index($name){
  @return index($elementes,$name)
}

//呼び出し
.header {
  z-index: z-index(header);//1
}

.navigation {
  z-index: z-index(navigation);//2
}

非常に便利ですね！
Sassのベースファイルに要素の配列とfunctionまで記述しておけば、
z-indexがどこに使われているのかすぐに確認できます。
これで困った時のz-index:9999;から卒業できそうです

おまけ：z-indexの落とし穴

スタックコンテキストを正しく記述しているにも関わらず、z-indexとpositonがうまく機能しない事例があり、しばらくはまっていました・・

transformなどのプロパティを設定するとずれる

同じ要素としてtransformのプロパティを設定した場合、transformのz軸で設定した値に依存してしまい、想定した要素の位置とはずれてしまいました。
この場合、transformプロパティを削除するか、該当の要素を<div>などでラップし、こちらにtranfromのz軸を指定することで対応できます。

まとめ

困った時のz-index:9999から抜け出す方法、いかがでしたか？
煩雑になりがちなz-indexを意識的に管理することで、みなさんの素敵なデザインを実現していってください！

私たちのチームで働きませんか？

エイチームは、インターネットを使った多様な技術を駆使し、幅広いビジネスの領域に挑戦し続ける名古屋の総合IT企業です。
そのグループ会社である株式会社エイチームブライズでは、一緒に働く仲間を募集しています！

上記求人をご覧いただき、少しでも興味を持っていただけた方は、まずはチャットでざっくばらんに話をしましょう。
技術的な話だけでなく、私たちが大切にしていることや、お任せしたいお仕事についてなどを詳しくお伝えいたします！

Qiita Jobsよりメッセージお待ちしております！