CSSのz-indexプロパティが効かない場合の対処法！

CSSのz-indexプロパティが効かなくて困ってしまうケースがよくあります。

例えばz-indexプロパティを指定して他の要素の上にリンクを設置したいのに、なぜか他の要素の下になってしまって、リンクを押せないというときがあります。

実際にサンプルコードを用いて、確認してみましょう。

このようにリンクとなるa要素に対してz-index: 100;を指定しているにもかかわらず、リンクが隠れてしまって押せません。

ここではこういったCSSのz-indexプロパティが効かないケースとその対処法を解説します。

それではCSSのz-indexプロパティが効かない場合はどういった時か、またその対処法について解説します。

z-indexプロパティはpositionプロパティを指定していない要素に対しては、機能してくれません。

HTML要素に対してpositionプロパティはデフォルトでstaticが設定されています。

z-indexプロパティを機能させたい場合は、positionプロパティにstatic以外のrelative、absolute、fixedのいずれかを設定します。

では実際にサンプルコードを用いて挙動を確認しましょう。

z-indexプロパティを指定しないと、HTMLで記述した順番に重なるのですが、z-indexを2番目の要素に指定したので、二番目の要素が一番上に表示されていることが分かります。

また今回はそれぞれの要素にposition: absolute;を指定しているので、z-indexプロパティが効いています。

いくつか別々の要素があったとして、最前面にしたい要素を子要素、もしくは擬似要素(::after、::before)にしてしまっている場合は、z-indexを指定しても、疑似要素ではなく、親要素に対して反映されるだけです。

もし別に親要素と同じ階層の要素があり、それが親要素よりも後に記述されている、もしくはz-indexプロパティでより大きい値が設定されていると、最前面に出すことができません。

どういうことか具体的にサンプルコードを用いて挙動を見てみましょう。

今回.no2というクラスが付いた要素を一番上に表示させたいとします。

このように.no2のクラス設定されている要素に対して、あえてz-index: 100;と大きな値を設定しましたが、一番上に表示されません。

対処法としては、親要素と同じ階層にある.no3というクラスが設定されている要素に対して、z-index: -1;を設定するか、親要素に対してz-index: 2;というように、親要素の方がz-indexの値が高くなるように設定するしかありません。

ただこの時、.no3のクラス設定されている要素の重なり順が一番下になってしまうことに注意してください。

では実際に.no2が一番上に表示されるか、サンプルコードを用いて確認してみましょう。

このように.no2が一番上に表示されています。

z-indexプロパティは整数しか値に取りません。もし小数を設定しているとz-indexプロパティは機能しないです。

実際にサンプルコードを用いて、確認してみましょう。

このように.no2を一番上に表示したいのに、z-index: 2.5;と小数になっているため、z-indexプロパティが機能しません。

整数にするとz-indexプロパティが正常に機能します。

またz-indexプロパティには最小値、最大値が決まっており、それを超える値を設定しても機能しません。

詳しくは以下の記事で解説しているので、参照してください。

いかがでしたでしょうか？

z-indexプロパティを用いる場合は、positionプロパティが設定されているか、もしくは要素がどの位置にあるのかを意識する必要があります。

ただz-indexプロパティはよく用いるCSSプロパティなので、ぜひここで紹介したことを意識しながら使ってみてください。