HTML/CSS

【HTML/CSS】z-indexが効かないときに確認すること

あきぞらです。

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;
}

意外とハマるところなので、注意していきましょう!

-HTML/CSS

Copyright© あきぞらてっく , 2021 All Rights Reserved Powered by AFFINGER5.