CSSでz-indexにマイナスを設定すると消える場合の対処法！
CSSでz-indexにマイナスを設定すると消える場合の対処法について解説します。z-indexを用いる場合はとある条件が必要となってきます。その条件とは何か、またCSSでz-indexにマイナスを設定すると消える場合どう対処すればいいのかについて解説します。
CSSでz-indexにマイナスを設定すると消える
CSSでz-indexプロパティにマイナスを設定すると消えるということを経験したことがあるのではないでしょうか。
以下の項目でその対処法を解説します。
CSSでz-indexにマイナスを設定すると消える場合の対処法
それではCSSでz-indexプロパティにマイナスを設定すると消える場合の対処法について解説します。
まずCSSでz-indexプロパティに負の値を設定すると消える場合を見てみましょう。ここでは解説のため意図的にz-index: -1;を設定してリンクを消しています。
では実際にサンプルコードを用いて挙動を確認してみましょう。
このように本来「リンクはこちらです」というテキストのa要素が表示されるはずですが、リンクとなるa要素のz-indexプロパティに負の値が設定されているがために、消えていることが分かります。
CSSでz-indexにマイナスを設定すると消えた原因
原因としては、a要素にposition: absolute;とpositionを設定しているがために、他のz-indexがより大きい.bg要素の背後に回ってしまったたｍです。
対処法
今回の対処法としては、a要素のposition: absolute;を無くすか、.bgというクラスが設定されている要素に対してpositionプロパティの値でstatic以外の値を設定して、z-indexの値を-1よりも小さく設定するということが挙げられます。
では実際にサンプルコードを用いて挙動を確認してみましょう。
このように.bgにもposition: absolute;を設定して、z-index: -2;とすることで、a要素が現れたことが分かります。
子要素にCSSでz-indexにマイナスを設定した場合
子要素にz-indexにマイナスを設定した場合、z-indexの値は親要素のz-indexの値に依存します。
実際に子要素にz-indexプロパティにマイナスの値を設定して消えてしまう場合を、サンプルコードを用いて確認してみましょう。
このようにリンクとなるa要素のz-indexの値が一番大きいはずなのに消えてしまっています。
リンクが消えてしまった原因
リンクが消えてしまった原因としては、a要素は.bg1の配下にあるため、a要素に設定しているz-index: -1;は親要素の.bg1に対してのみ適用されます。
ですので、.bg1と.bg2のz-indexプロパティの値は同じであるため、HTMLで後に記述された.bg2が.bg1の上に表示され、.bg1の子要素であるa要素も.bg2の背後に隠れてしまったということです。
対処法
.bg2のz-indexプロパティの値を.bg1のz-indexプロパティの値よりも小さく設定することで、リンクが画面上に表示されるようになります。
では実際にサンプルコードを用いて挙動を確認してみましょう。
このように.bg2にz-index: -3;と一番小さな値を設定したので、リンクが画面上に表示されました。
まとめ
いかがでしたでしょうか？
WEBサイトを制作していて、CSSでz-indexプロパティにマイナスを設定すると消えてしまった場合は、ぜひここで紹介した例をもとに解決してください。
またz-indexプロパティを用いる際はいくつか注意点があります。
以下の記事で解説しているのでぜひ参照してください。
