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

この記事は CSS Advent Calendar 2014 の20日目です。

概要

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

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

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

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

値:   auto | <integer> | 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)

デモ

bottom: max int32 – 1

top: max int32

bottom: max int32

top: max int32 + 1

bottom: max int64 – 1

top: max int64

bottom: max int64

top: max int64 + 1

top: max int32

bottom: max int32 – 1

top: max int32 + 1

bottom: max int32

.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 に変わる
  • 92233720368547758079223372036854775808 を指定すると、それぞれ 2147483647 になる
  • 同数値の場合、要素の重なりは、後に記述したものが上になる (z-index:2 でも同じ動作をする)

Firefox (32bit) の上限は 2147483647

Chrome

32bit / 64bit

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

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

Chrome (32bit / 64bit) の上限は 2147483647

まとめ

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

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


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