どうも7noteです。z-indexがうまく効かない時の注意点について。

重なり順を変更することができるz-indexですが、正しく記述しないと効かない場合があるので書き方には注意が必要です。

position指定がない

z-indexはposition: static;（初期値のこと）だと効かない。

positionを、「relative」・「absolute」・「fixed」・「sticky」のいずれかに指定する必要があります。

/*効かない例*/
  position: static; /* （もしくは指定なし） */
  z-index: 10; /*←効かない*/

/*効く例*/
  position: relative;
  z-index: 10; /*←効く*/

まとめ

結構陥りがちのミスなので、気をつけたいところ。
あとはz-indexは設定していなければ0と同じなので、後ろにもっていきたい時はマイナスの値を設定すると良い。

おそまつ！