z-indexの値は「無限」と「2147483647」どちらが強いの？
先日、前面に必ず出したい要素のz-indexにはcalc(infinity)をつけるとよい旨の情報を見ました。
確かに「無限」を指定すれば単純なz-indexの値の勝負では勝てそうな気がします。一方でz-indexマニアの間ではz-indexの上限値は2147483647[1]というのが常識になっています。ではこの「無限」と「2147483647」のどちらが強いのか検証しました。
結果
結論から言うとどちらも同じ値の扱いでした。calc(infinity)を指定しても上限値の2147483647でカンストするようです。
右の図のようにHTMLの順において後に書けば、「2147483647」が「無限」の上に来ました。
検証方法の説明
ここからは検証方法について軽く説明します。z-indexの強さは同一スタッキングコンテキスト上にある必要があります。そしてその中でz-indexが同じ値の場合はHTMLでのコード順、つまり後に書かれたものが勝つことになっています。そのため、もし「無限」が「2147483647」より強いならば、HTMLの順に関わらず上に来るはずです。
そこで下記のように2つのスタッキングコンテキストを用意し、それぞれHTMLの順を変えたものを用意しました。
▼簡略のため一部抜粋
<div class="wrapper">
<div class="z2147483647">z-index: 2147483647</div>
<div class="infinity">z-index: calc(infinity)</div>
</div>
<div class="wrapper">
<div class="infinity">z-index: calc(infinity)</div>
<div class="z2147483647">z-index: 2147483647</div>
</div>
それぞれ.wrapperという同一スタッキングコンテキスト上に要素を配置しz-indexを比べます。もし同一の値ならHTMLの順の強さになり、もし無限が強いなら常に無限の要素が上に来るはずです。
結果は先のとおりで、後者の「2147483647」が上にきてHTML順の優先順位となったので、「無限」と「2147483647」は同一の値であることが確かめらました。
なお、infinityの値が2147483647ではありません。calc(infinity - 2147483647)の結果も2147483647と同じなります。あくまでz-indexの上限値である2147483647で止まっているということになります。
最後に
calc(infinity)がz-indexにおいて無限ではないことが分かったのですが、2147483647が上限値であることは広く知られたことではないですし、覚えにくいです。calc(infinity)を使えばそれが最大であることがコードからも読み取れるので分かりやすいと思います。
また、z-indexの値は同一スタッキングコンテキスト内における比較です。別のスタッキングコンテキスト同士では重なり関係が変わってきます。そのあたりは下記の拙筆にて詳しく解説されています。
-
符号付き32bitにおける最大値、
2^{31}-1
Discussion
2147483647は符号付き32bitの最大値なので2^32-1ではなく2^31-1ですね
ご指摘ありがとうございます。記事中の表現を訂正しました