先日、前面に必ず出したい要素のz-indexにはcalc(infinity)をつけるとよい旨の情報を見ました。 確かに「無限」を指定すれば単純なz-indexの値の勝負では勝てそうな気がします。一方でz-indexマニアの間ではz-indexの上限値は2147483647[1]というのが常識になっています。ではこの「無限」と「2147483647」のどちらが強いのか検証しました。 結果 結論から言うとどちらも同じ値の扱いでした。calc(infinity)を指定しても上限値の2147483647でカンストするようです。 右の図のようにHTMLの順において後に書けば、「2147483647」が「無限」の上に来ました。 検証方法の説明 ここからは検証方法について軽く説明します。z-indexの強さは同一スタッキングコンテキスト上にある必要があります。そしてその中でz-indexが同じ値の場合は
![z-indexの値は「無限」と「2147483647」どちらが強いの?](https://cdn-ak-scissors.b.st-hatena.com/image/square/f2b3c1c8039b6efa6314fd04b0b8541d08d54f5f/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--PbU8cPfl--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3Az-index%2525E3%252581%2525AE%2525E5%252580%2525A4%2525E3%252581%2525AF%2525E3%252580%25258C%2525E7%252584%2525A1%2525E9%252599%252590%2525E3%252580%25258D%2525E3%252581%2525A8%2525E3%252580%25258C2147483647%2525E3%252580%25258D%2525E3%252581%2525A9%2525E3%252581%2525A1%2525E3%252582%252589%2525E3%252581%25258C%2525E5%2525BC%2525B7%2525E3%252581%252584%2525E3%252581%2525AE%2525EF%2525BC%25259F%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3A%2525E3%252581%2525AB%2525E3%252581%252597%2525E3%252581%2525AF%2525E3%252582%252589%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2FmN2I2NDVkZTguanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)