CSSのz-indexプロパティの値の最大値と最小値は?

CSSのz-indexプロパティの値の最大値と最小値はいくらかについて紹介します。また最大値と最小値を超えてしまうと実際に効かないのか、最大値と最小値の値は本当なのか、サンプルコードを用いて検証します。

コンテンツ [表示]

  1. 1CSSのz-indexプロパティの値の最大値と最小値は?
  2. 2検証
  3. 2.1最大値
  4. 2.2最小値
  5. 3まとめ

CSSのz-indexプロパティの値の最大値と最小値は?

z-indexプロパティの値の数値の最大値と最小値ですが、結論から申し上げますと、safari 3以外の環境ではz-indexの最小値は-2147483647で最大値は2147483647となります。
※safari 3の環境ではz-indexの最小値は-16777271で最大値は16777271となります。

32bit符号付きで表現できる整数値が-2147483647 ~ 2147483647ですが、z-indexプロパティの最大値・最小値もこの範囲となっています。約21億5千万ですので、とても使い切れはしないですね。

検証

最大値

では最大値の値が本当かどうか検証してみます。ちなみにですが、最大値を超えた値は最大値の値となります。

では実際にサンプルコードを用いて挙動を確認してみましょう。

.no1の要素に最大値に+1した値を設定して、前面に表示させたいとします。

このように.no1z-indexプロパティの値が最大値を超えてしまったがために、前面に表示されないことが分かります。

では.no1z-indexプロパティの値を最大値+1、.no2z-indexプロパティの値を最大値-1にしてみるとどうなるのか、サンプルコードを用いて挙動を確認してみましょう。

このように.no1が前面に表示されることから、z-indexプロパティの最大値を超えた値は最大値の値に修正されることが分かります。

最小値

ではz-indexプロパティの最小値の値が本当かどうか検証してみます。最小値を超えた値は最小値の値となります。

では実際にサンプルコードを用いて挙動を確認してみましょう。

.no2の要素に最小値に-1した値を設定して、.no1を前面に表示させたいとします。

.no1が前面に表示されてしまったことから、-2147483647が最小値ではないみたいです。

さていくらが最小値でしょうか、その答えは-2147483648でした。

では先ほどと同じ方法でサンプルコードを用いて、確認してみましょう。

このように.no2が前面に表示されたことから、z-indexの最小値は-2147483648であることが分かりました。

またこの結果からz-indexプロパティの最小値を超えると、最小値の値に修正されるということが分かります。

まとめ

いかがでしたでしょうか?

検証してみることで最小値の値が異なっていたことが分かりました。

z-indexプロパティを用いる際は、この最小値、最大値の値に注意する以外にもいくつか注意点があります。

その注意点については以下の記事で解説しているので参照してください。

あわせて読みたい
CSSのz-indexプロパティが効かない場合の対処法!のイメージ
CSSのz-indexプロパティが効かない場合の対処法!
CSSのz-indexプロパティが効かない場合の対処法について解説します。WEBサイトを制作しているときに、CSSのz-indexプロパティが効かないという問題はよく起きます。ここではその問題が起きるケースとその対処法をサンプルコード付きで解説します。
今だけ
無料

【5月31日まで】全カリキュラム無料で提供中!

Qumeru

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを5月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを5月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次