なぜか前面に表示されない？position:relative,absoluteとz-indexでの重なり順の関係

重なり順がうまく指定できない。
最前面に出てきて欲しい要素が裏に回って表示されてしまう。
CSSでpositionを使って位置を設定している場合にはよく現われる現象です。
特にInternetExplorerでは気をつけないとこの罠にハマってしまいます。
重なり順を指定するz-index。
このz-indexとpositionを同時に使う場合には注意しないといけません。



position属性で良く使うのがrelativeとabsolute。
absoluteはその特性上、使う場合に気をつける人が多いのですがrelativeだって実はなかなかやっかいです。
relativeは一見使いやすいので頻繁に使いがちですが、
relativeを使うと暗黙のうちにz-indexが指定されるので、
重なり順を考慮する場合は気をつけないと罠にはまります。
重なり順の指定について知っておくことで、この問題に悩まないようにしておきましょう。

基本的に２つの重なり合った要素がある場合、
重なり順はコード上後に出てきたものが上に重なって表示されます。
A、Bの順で要素が指定されたとき、後に書かれたBが上に表示されます。


この場合、Aを前にしたければ
Aのz-indexを10
Bのz-indexを0
とかにすればいいです。
※値が大きいほうが上にくる


でも、通常ホームページって要素が２つしかないってことはないので
たくさんのものが重なり合ってます。
そんな中で単純に重なり順を変えるために
同じように
Aのz-indexを10
Bのz-indexを0
としたってうまく行かないことがあります。
これは不具合ではなく通常の動作。
次のようになっていることが多いです。


単純にAとBを比較するとAの方がz-indexの値は大きいですが、
そのベースとなっている要素（赤と緑）の重なり順がすでに緑が上に来ていることがわかります。
AとBは配置されている場所が違うのでz-indexをいじったところでお互いに何も影響がありません。
この場合、AとBにz-indexの指定をするのではなくて、そのベースの要素を操作する必要があります。
赤と緑のz-indexを入れ替えると下のようになり、Aが上に来ますね。
この際AとBのz-indexは不要なので消しても大丈夫です。


もし、重なり順で思ったような挙動をしないときは、
そのベースとなる要素を調べてみましょう。
特にposition:relativeは自動でz-indexが設定されてしまうので、
意図しないうちに重なり順が指定された状態になってしまい、見えない重なり順に悩まされます。
慣れれば難しいものではないですが、positionを使う際には気をつけましょう。