20. 要素の重なり順を指定する z-index

目次

z-indexの基本

z-indexプロパティは、要素が重なったときに、その重なり順を指定するときに使います。

値は数値で指定でき、マイナスの値もとることができます。値が大きいほど(プラスになるほど)その要素は手前に表示され、小さいほど(マイナスになるほど)向こう側に表示されます。

ただし、1つ注意しなければならない点は、position: static;だとz-indexを指定しても効かない、ということです。つまり、positionプロパティを指定していないデフォルトの状態だとz-indexが効かないため、positionプロパティでstatic以外の値を指定してあげる必要があります。

↓例えば、下の例では#box2に対してposition: relative;を指定して本来の表示位置からずらして、#box1に重ねてみました。


この状態で#box1を手前に持ってきたかったとします。ところが、#box1に対してz-indexをプラスに指定しても、positionがstaticになっているため、効かないことになります。ではどうするかというと、#box1に対して単にposition: relative;と指定すればOKです(topやleftといった位置の指定は必要ありません)。


このように、ちゃんと#box1が手前に表示されました。

また、この場合は#box2のz-indexをマイナスにすれば同じ結果になってくれます。


z-indexの値は何も指定しないと0になっているので、マイナスの値を指定すると、その要素は向こう側に表示されることになります。

z-indexの値の最大値・最小値は一応存在しますが、とてつもなく大きい数字なので、そこまで気にする必要はないかと思います。どんなに複雑なサイトでも1万くらいには収まるのではないでしょうか^^;

z-indexはCSSで図形を書くだけでなく、モーダルを作る際にも使いますし、使用頻度はそこそこ高いプロパティなので、ぜひ使い方をマスターしておきましょう。