ど素人から毛を生やす。<延>

z-indexで最前面にならない!

Web > css 2014年4月1日(最終更新:3年前)

このページは2014.4.1に作成されています。時代の流れとそぐわない可能性があったり、僕が今以上のど素人だった頃の記事だったりするので、新しい記事を探してみるのも良いかもしれません。

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

消費増税前に本屋で「鬼灯の冷徹」と「マギ」をまとめ買いする予定でしたが、残業のおかげでおじゃんになりました。

さて、今回は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は上手く動かないはずです。

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

この記事は役に立ちましたか?
  • _(:3」∠)_ 面白かった  (2)
  • (`・ω・´) 役に立った (3)
  • (・∀・) 参考になった (5)