z-indexって自由すぎるやんか…という話
ガイドライン
IABがガイドラインを出している。(ただしQuickGuideがExcel）
原典
| Z-Index Range | Content Type | Details |
|---|---|---|
| < 0 | Background Elements | None |
| 0 - 4,999 | Main Content, Standard Ads | Standard ad tags in place with regular content. Includes IBA Self-Regulation Message (CLEAR Ad Notice) |
| 5,000 - 1,999,999 | Expanding Advertising | The entire expandable ad unit should be set within this range |
| 5,000,000 - 5,999,999 | Expanding Site Navigation Elements | Drop down navigation, site warnings, etc. Only the expanding portion of navigation elements should be included on this level. |
ざっくり和訳
| Z-Indexの値 | コンテンツの種類 | 説明 |
|---|---|---|
| 0未満 | バックグラウンド要素 | 特に特記事項なし |
| 0〜4,999 | メインコンテンツ, 一般的な広告 | 通常のコンテンツを含む標準の広告タグ。 IBA自主規制メッセージを含む |
| 5,000〜1,999,999 | エキスパンド広告 | エキスパンド広告ユニット全体をこの範囲内に設定する必要があります |
| 5,000,000〜5,999,999 | サイトナビゲーションの要素 | ドロップダウンナビゲーション、サイトのアラートなど。 |
サイトの要素は4,999までで設定して、「大事なお知らせ」みたいなモーダルメニューは 5,000,000 以上を設定するのが良さそう。
仕様としての上限値はあるのか
z-indexの値はintegerなのでintegerの最大値が上限値と考えることができるが、CSSとしてはintegerの範囲を定義していない。
公式には、有効な
値の範囲は決められていません。 (中略)最新の仕様書では範囲を定めなくなりました。 - - CSS: カスケーディングスタイルシート | MDN
ただ通説的にはint最大値とされる2の31乗-1の 2,147,483,647 がよく登場する。が、これもブラウザの実装に依存する部分なのでまちまちな感じ。
