CSSで使用できる「z-index」プロパティの使い方についての備忘録です。
「z-index」プロパティの使い方について
z-indexとは
「z-index」は重なり順序を指定するCSSプロパティです。
「z-index:2」といった形で使用します。
数字が大きいほど前面に出てくるようになります。
数字にはマイナスの値も設定可能です。
もちろん小さい数になるので、後面に回るようになります。
初期値はAutoとなっています。
これだけ聞くととても簡単なプロパティですが、注意点が2つあります。
それは
- positionを指定すること
- before、afterの場合
です。それぞれ見ていきましょう。
z-indexを使う場合にはposition指定をしよう
実はz-indexはそのままでは機能しません。
前面、あるいは後面に表示したい要素に対してpositionを指定する必要があります。
positionプロパティは初期値で「static」を持っていますが、これには重なり順序がありません。
そのため「z-index」を指定するにはpositionを「static」以外にする必要があります。
単純に重なり順だけを何とかしたいなら「position:relative」を指定すると良いでしょう。
before,afterのz-indexは親要素に注意
before要素、after要素にz-indexを指定する場合は、親要素に注意です。
親要素にz-indexを指定してしまうと、before要素などにz-indexが効きません。
親要素はz-indexを指定せず、
before、after要素を前面に出したければ「z-index:1」などを、
後ろに回したければ「z-index:-2」といった形でマイナス値を使用しましょう。