どもです。
新年度明けました餅。です。

さて、今回はCSSの話。

要素の重なりを操作するCSS、「z-index」。
最前面に持ってきたつもりが、想定外の要素の下に潜り込んでしまうことがあります。

原因は結構な割合で、下に書いた要素がpositionを持っているというもの。

普通はz-indexを大きく設定すれば解決するハズですが、それでも何故かうまくいかないことがありますね。

逆に考えましょう。
「z-indexで解決できなくていいや」
と考えるんです。

z-indexではなく、positionをどうにかしてしまいましょう。

具体的には、absoluteなら最前面にしたい要素の前に書いてしまいます。

relativeなら、marginで代用します。
ネガティブマージン（margin-left:-100px）を使うことで、大体の場合はrelativeの代用ができてしまいます。

対処療法ではなく、初めから原因を作らないという解決法。
悩みすぎて考えるのが嫌になってしまったとき、試してみては如何でしょうか。

 

z-indexで解決したい場合

上にしたい要素と、下にしたい要素の関係性を把握することが必要です。

要素AとBが兄弟要素であれば、z-indexは問題なく働くはずです。

AとBが親子だとz-indexは上手く動かないはずです。

要素の関係性を把握し、その位置を調整することで多くの問題は解決するのではないでしょうか。