z-indexでたまにハマる件を解決

z-indexで思い通りにいかない時に確認することは、まず第一に「兄弟要素かどうか」ですよね。
初心者の頃は、間違えて親子関係に対してz-indexでをかけようとして、それに気付かずに悩むという事はよくありました。

しかし悲しい事に、兄弟要素なのに上手くいかない場合があります。
例えば、

HTML

<div class="parent"> 
    <div class="child_a"></div>
    <div class="child_b"></div>
</div>

</div>

HTMLは基本、下に書いた方が手前に来ますから、要素を逆にすればいいのですが、
何らかの理由で.child_aを.child_bより前に持って来たい場合があったとします。

通常は、.child_aに.child_bより大きいz-index値を指定すれば良いのですが、
なぜか上手くいかない時があります（なぜかは聞かないでください…涙）。
そんな時は、.child_aに対してposition: relative;を明示した上で、z-index値を指定します。
これは、z-indexはposition: staticに対しては効かない仕様のためです。

CSS

.parent .child_a {
  position: relative;
  z-index: 10;
}
.parent .child_b {
  z-index: 0;
}

.parent .child_a {

position: relative;

z-index: 10;

}

.parent .child_b {

z-index: 0;

}

要素の背景が透明な場合も

あと、意外と気付きにくいのは、手前の要素（.child_b）に透明の画像を配置してあり、.child_aにリンクを配置している場合。
ただ単に後ろにある文字が見えているだけなのですが、.child_aをクリックできずに、z-indexでどうにかしようとしてしまってしばらく悩んでいると、
.child_bが.child_aを覆っていてクリックできないだけ、なんて事も実はたまにあったりします。