Blog

• z-indexが効かない？その対処法と覚書

  2021/01/20

  

  Webサイト制作でz-indexが効かなくて、オブジェクトの重なりをコントロールできず困ってしまったときの対処法覚書です。

  画像の上にテキストを配置しようとしたのですが、なぜかz-indexが効きませんでした。cssを、

  z-index:9999;

  とかにしても、まったく無反応。( ﾉД`)ｼｸｼｸ…

  色々調べた結果、どうやらcssプロパティのpositionが関係しているようでした。

  このサイトの解説が分かりやすかったです。

  absolute、relative、fixedなどstaticではない要素は、 デフォルトのstaticな要素よりも記述順番に関係なく 必ずZ軸上で手前に描画される。

  positionがstaticの要素にはz-indexの指定はできない。

  absolute, relative, fixed以外でz-indexは動作しない。

  ということで、上位に表示したい要素にposition: relative; をつけると、z-indexで操作ができました。