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

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

では、また。