[CSS] z-index の最大値について調べた

概要

過去に「[CSS] z-index の上限値」という記事を書いた。

当時は 64bit ブラウザは無かったので 32bit を前提にしていた。そのため、特に検証などもしていなかったのだが、先日、64bit Chrome も正式リリースされたこともあるので、今回は 64bit ブラウザでどういう動きをするのか含めて調べてみる。

z-index プロパティについて

これまで言われていたのが z-index プロパティの値に制限はないけれど、評価される最大値は符号付き 32bit 整数までということ。

値:	auto | | inherit
初期値:	auto
適用対象:	位置指定された要素
継承:	no
パーセンテージ:	利用不可
メディア:	visual
算出値:	指定値

32bit と 64bit の整数についてz-index プロパティの値の有効範囲はいくつなのか。

符号付き 32bit 整数は以下なので、これが z-index の有効範囲になる。

-2147483647 ～ 2147483647

-> 約 21 億

ちなみに符号付き 64bit 整数は以下

-9223372036854775808 ～ 9223372036854775807

9*10^18 = 9000000000000000000 (900京)

-> 約 900 京
順当に考えるならば 64bit ブラウザでは、この範囲が z-index の有効範囲になるのか…? (予想)

事前に誰か質問していないか調べてみても、32bit ブラウザの話しか出てこなかったり、「64bit なら 9223372036854775807 っしょ(適当)」みたいな話しか出てこなかった。

実際に調べてみる必要がありそう。

検証

環境

環境は以下の通り

• Windows 7 / Windows 8.1
  • Firefox 34 (32bit)
  • Chrome 39 (32bit)
  • Chrome Canary 41 (64bit)

デモ

.int32 {
  z-index: 2147483646;
}

.int32-limit {
  z-index: 2147483647;
}

.int32-over {
  z-index: 2147483648;
}

.int64 {
  z-index: 9223372036854775806;
}

.int64-limit {
  z-index: 9223372036854775807;
}

.int64-over {
  z-index: 9223372036854775808;
}

調べている際に、検証用に理想的なサンドボックスがあったのでこちらから丸々拝借した。

ありがとうございます。

Firefox (32bit)

• 9223372036854775807 を指定しても 2147483647 として評価される
• インスペクタで 9223372036854775807 を指定してみても 2147483647 に変わる
• 9223372036854775807 と 9223372036854775808 を指定すると、それぞれ 2147483647 になる
• 同数値の場合、要素の重なりは、後に記述したものが上になる (z-index:2 でも同じ動作をする)
  Firefox (32bit) の上限は 2147483647

Chrome

32bit / 64bit

両者とも同じ動きをした。

• developer Tools で確認すると 9223372036854775807 の値はセットされている
• 9223372036854775807 と 9223372036854775808 を指定しても変化なし
  (裏で 2147483647 と 2147483647 に丸められている?)
• 9223372036854775807 と 2147483646 だと前者が上になる
• 2147483646 と 2147483645 のように 32bit 整数の範囲で数値を変えると変化あり
  Chrome (32bit / 64bit) の上限は 2147483647

まとめ

64bit も 32bit も同じ動きだった。
検証不足な感も否めないが、今回は以上。

Chrome は今後のアップデートとかで変わってくるかもしれないので、また調べてみる。
あと、Firefox も 64bit がリリースされたら調べてみる。

仮に 64bit 整数が効いたとしても、さすがに 900 京 は必要ないかな… (アニメーションなんかする時は使うかもしれないけれど)