Murga

個人的に言いたいコト・主張・気持ち。

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

これからWebをはじめる人のHTML&CSS、JavaScriptのきほんのきほん

これからWebをはじめる人のHTML&CSS、JavaScriptのきほんのきほん

これまで 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 サイトナビゲーションに関する拡張要素 ドロップダウンナビゲーションや警告のモーダルなど、画面を覆うような要素

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

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

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

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

z-index の有効範囲は?

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

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

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

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