z-index の指標値ガイドラインがあった
これまで position: relative な要素との重なり順が思ったようにならない時に、なんとなく z-index: 9999 を使ったりしているだけで、あまりきちんと仕様を把握していなかった。色々と調べていると、z-index の数値に関するガイドラインが存在することが分かった。
目次
IAB Z-index Guidelines
IAB という、オンライン広告に関する規格策定を行う非営利団体が作成した PDF なのだが、この P24 に Z-index Guidelines という章がある。拙い英語力で意訳すると、以下のような指標になっていた。
| 範囲 | コンテンツタイプ | 説明 |
|---|---|---|
| 0 以下 | 背景要素 | 特になし |
| 0 〜 4,999 | メインコンテンツ・通常の広告 | 通常のコンテンツと一緒に置く広告 |
| 5,000 〜 1,999,999 | 拡張広告 | ポップアップ広告など、画面手前に現れることがある広告 |
| 5,000,000 〜 5,999,999 | サイトナビゲーションに関する拡張要素 | ドロップダウンナビゲーションや警告のモーダルなど、画面を覆うような要素 |
主にバナー広告に焦点を当てた指標値ではあるが、メインコンテンツとサイトナビゲーションに関する値の指標などは参考になるだろうか。
他にもガイドラインがあった
- 参考 : https://www.linkedin.com/pulse/z-index-guidelines-andrii-lundiak
- 参考 : https://qiita.com/armorik83/items/85cf705aaee6a34af4bb
少し前の IAB のガイドラインはこんな感じだったようだ。現在よりもう少し細分化されている。
コチラは AOL と Yahoo! が統合して生まれた Oath という企業のガイドライン。こちらも広告の観点がメイン。
z-index の有効範囲は？
ところで、仕様的に z-index プロパティが扱える数値の有効範囲はあるのか、というと、ある。
z-index の値には auto か Integer 整数値がとれる、となっているので、最大値は 2,147,483,647 (約21億) まで指定可能だ。負数はレガシーブラウザでバグる恐れがあるので、-1 を稀に使う程度に留めておくのが良いようだ。
その他 z-index の仕様を再確認
z-index の仕様を再確認するには、以下の記事がオススメ。