2014年9月13日土曜日

CSSのz-indexって…上限・下限

今日はある目的からCSSのプロパティ「z-index」について調べておりました。
z-indexって、数あるCSSのプロパティの中でも知名度は低い方なんじゃないでしょうか。
いやだって「普通な」ページを作ろうとしてれば滅多に気にしないですもの。

 z-indexとは

  • ボックスの重なり順を指定するプロパティである。
  • positionにstatic以外(absolute,relative,fixed) が指定されている時にのみ機能する。(←ハマりやすい?)
  • 整数値(負、0、正)またはauto(=0)が指定できる。
  • 一応inheritも指定できる。使いどころはわからない。
  • 値が大きいほど手前に、小さいほど奥に表示される。
  • デフォルト値は auto。
  • z-indexが等しい要素は、記述された順に重なる (つまり、なにも弄らなければ全部記述された順に重なる)。
  • 重なり順は、そのDOM階層の中でしか通用しない(よく考えてみれば当然か)。
こんなところでしょうか。
CSSではよくあることですが、文章で説明するのが難しいです。
positionをabsoluteとかにしてごちゃごちゃ動かしたボックスたちの重なり方を指定できるのがz-indexです。z-indexが同じ要素は記述された順に重なります。

(書いていてふと気付いたが、僕があまりz-indexを見慣れていないのは普段positionをあまり変えないからなのかも知れない…)

z-indexの最小値・最大値

本題です。
とある事情から「全ての要素の前面/背面に表示される要素」を作る必要が出てきたので、
「最大値/最小値に指定すれば絶対に前面/背面に表示されるだろ!」
というちょっと安易な発想のもと、z-indexの最大値と最小値について調べ始めました。

その結果、ちょっと古い情報ですが、どうやら大部分のブラウザでは

最大2147483647、最小-2147483648

……らしいです(参考)。これは32bit符号付き整数の値の範囲なので、まあそれっぽい。
さて、参考にしたページによると z-indexが2147483647より1でも増えると思惑通りに扱われないようですが、手元のFirefox 32やSafari 7では214783649のボックスと214783648のボックスのz-indexを比較して、ちゃんと順番通りに表示してくれました

これはちょっとビックリしました。
内部的に32bitでは無くなったのでしょうか…
 
後ほど暇が出来たら具体的なソースを載せたりもうちょっと深く調べたりするかも知れません。

0 件のコメント:

コメントを投稿