z-index の指標値ガイドラインがあった

これまで position: relative な要素との重なり順が思ったようにならない時に、なんとなく z-index: 9999 を使ったりしているだけで、あまりきちんと仕様を把握していなかった。色々と調べていると、z-index の数値に関するガイドラインが存在することが分かった。

目次

• IAB Z-index Guidelines
• 他にもガイドラインがあった
• z-index の有効範囲は？
• その他 z-index の仕様を再確認

IAB Z-index Guidelines

• 参考：https://www.iab.com/wp-content/uploads/2017/08/IABNewAdPortfolio_FINAL_2017.pdf

IAB という、オンライン広告に関する規格策定を行う非営利団体が作成した PDF なのだが、この P24 に Z-index Guidelines という章がある。拙い英語力で意訳すると、以下のような指標になっていた。

主にバナー広告に焦点を当てた指標値ではあるが、メインコンテンツとサイトナビゲーションに関する値の指標などは参考になるだろうか。

他にもガイドラインがあった

• 参考：https://www.linkedin.com/pulse/z-index-guidelines-andrii-lundiak
• 参考：https://qiita.com/armorik83/items/85cf705aaee6a34af4bb

少し前の IAB のガイドラインはこんな感じだったようだ。現在よりもう少し細分化されている。

• 参考：https://advertising.aol.com/specs/guidelines/technical-guidelines/z-index-guidelines

コチラは AOL と Yahoo! が統合して生まれた Oath という企業のガイドライン。こちらも広告の観点がメイン。

z-index の有効範囲は？

ところで、仕様的に z-index プロパティが扱える数値の有効範囲はあるのか、というと、ある。

• 参考：z-index - CSS: カスケーディングスタイルシート | MDN

z-index の値には auto か Integer 整数値がとれる、となっているので、最大値は 2,147,483,647 (約21億) まで指定可能だ。負数はレガシーブラウザでバグる恐れがあるので、-1 を稀に使う程度に留めておくのが良いようだ。

その他 z-index の仕様を再確認

z-index の仕様を再確認するには、以下の記事がオススメ。

• 参考：z-index再入門 - z-indexの仕組み | CodeGrid
• 参考：CSS の z-index を理解する - CSS: カスケーディングスタイルシート | MDN