あきぞらです。
CSSをいじっていて、z-index
がどうしても効かない場面がありました。
今回は、z-index
が効かないときに確認することを紹介していきます。
他の要素のz-indexと重なっていないかか確認する
当然ながら、重なっている他のz-index
の方が上に設定してある場合は、
効かないように見えてしまうかもしれません。
z-index
の値を極端な値(-99999や10000など)に変えたりして試してみましょう。
positionを設定しているか確認する
z-index
が効かないときは、position
を設定しているか確認しましょう。
設定されていなければ、position: relative;
を指定します。
下の例は、test-class
クラスにposition: relative;
を指定した例です。
.test-class { position: relative; }
意外とハマるところなので、注意していきましょう!
では、また。
リンク