要素の重なりの順番を変える

このページでは、position を用いて重なりの順番を指定する方法について説明する。

下の写真は「Swimmy」という、Playground のメンバーが実際に案件で作成したホームページである。

よく見ると、左下の方は説明文といくつかの図形が重ねられてできていることがわかる。

このサイトに限らず、重ねる順番が間違っていると見た目が大きく変わり、場合によっては文字を覆ってしまうようなことが発生してしまう。

例えば、下の図を見て欲しい。先ほど使用したrelative、absoluteを使用して正方形を表示してみた。

このとき、画面の手前から奥向きにみた場合、青 → 緑 → 赤色の順番で表示がされており、文字の一部が見えなくなっている。

緑色の正方形を一番手前に表示させるには、z-indexというプロパティを使用する。

z-index

特定の条件を満たした状態（コラムの注意書きを参照）で使うことができ、数字が大きくなるほどより手前に表示させられる

そこで、緑の正方形に対し、z-index: 1; を指定した。

このようにすることで、期待通り緑色の正方形を一番手前に表示させることができた。