どうも7noteです。z-indexのめちゃくちゃな指定はもうヤメにします！
要素の前後の優先順位を決めることができる、z-indexですが便利です。
便利だけど、適当に指定していると思わぬ順番になってしまい、ぐちゃぐちゃに。。。
重ね順の指定ってムズカシイ。
ということで、マイルールを決めます！
その前に、z-indexについておさらい
CSS の z-index プロパティは、位置指定要素とその子孫要素、またはフレックスアイテムの z 順を定義します。より大きな z-index を持つ要素はより小さな要素の上に重なります。
引用元：https://developer.mozilla.org/ja/docs/Web/CSS/z-index
1. 「z-indexを何も指定しないと、後ろに書かれた要素が上にくる。」
2. 「使えるのは整数のみ。（0やマイナスは可）」
ちなみに最大値「2147483647」、最小値「-2147483647」が限界。
3. 「z-indexを有効にするためにはposition指定が必要」
position: relative;position: absolute;position: fixed;position: sticky;
これらが指定されている要素にz-indexを指定することでz-indexが有効化されます。
※つまりposition: static;（初期値）には効かない。
本題：z-indexのマイルールを決める
（※以下は私のマイルールです。変更の可能性大。）
| 使用場所 | 数値～ | 補足 |
|---|---|---|
| 背景的に使いたい大きな要素 | -100 | |
| 背面に隠す要素 | -1 ～ -99 | 疑似要素とか |
| 基準値 | 0 | 初期値 |
| 普段使うもの | 1 ～ 98 | バルーンとか。 |
| リンクエリア拡大 | 99 | 「biggerlink」や「linkarea」などaタグのクリック範囲を広げるもの |
| - | - | - |
| モーダル① | 999 | ※画面固定する要素を含まない |
| 画面固定する要素 | 1000 | 画面固定するヘッダーやフッターなど |
| - | - | - |
| 固定ヘッダーの上にくるnavメニュー | 1010 | ※ナビゲーションメニューが覆いかぶさるようなやつ |
| - | - | - |
| モーダル② | 9999 | すべてを覆いつくすモーダル |
解説
- 要素の後ろに隠したいもの⇒マイナス値
- スクロールができる要素に対して⇒1～998
- スクロールができる要素を覆う⇒999
- 固定する要素に対して⇒1000～
イメージとしてはこんな感じで設定しています。
-背景-
-基準-
-コンテンツ-
-固定コンテンツ-
大きくこの4層に分けることで大体のレイアウトに対応できるようなイメージです。
もちろんサイトのデザインによって変更が必要な場所も出てくると思うので、その際は予備で空いている間等に設定しなおすことでなんとかなるはず・・・
▼運用イメージ
たとえばスライドショーの矢印なんかはスクロールができる要素であることが多いので、10とかを設定しておきます。
写真タップで、拡大写真を表示したいようなモーダルの動きは、固定ヘッダーも覆うような全画面のデザインなら9999。モーダルよりも固定ヘッダーを上にしておいておきたい場合は999を指定。もし変更したくなっても1桁変えるだけなので簡単！
まとめ
まだ実運用経験が少ないルールですので、他にz-indexを使う場面を追加していく予定ではありますが、「私はこうしています！」みたいなルールがあればぜひ共有してください！
参考：
https://developer.mozilla.org/ja/docs/Web/CSS/z-index
https://saruwakakun.com/html-css/basic/z-index
https://tech.basicinc.jp/articles/170
おそまつ！
~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ