疑似要素で背景設定したら親要素のテキストが隠れてしまった･･･
というわけで今回は疑似要素でz-indexを使用した時に、親要素を一番上にする方法をお話しします。
疑似要素でz-indexを使用したときの挙動
そもそも今回のケース、どういう状況だったか説明します。
実例
メインビジュアルで背景が設定されていて、その上にテキストと、テキストの背景に図形を配置するパターン。
こんな感じです↓
この赤丸の四角形にタイトルを入れたかったのに表示されてません。
そのときのコードは下記の通りです↓(プレビューは0.5xか0.25xでご覧ください)
See the Pen ブログ用 z-index説明(失敗例) by そす (@Sosgoyo) on CodePen.
では、何がいけなかったのか解説していきましょう。
疑似要素使用時のz-indexの挙動
私がしたかったことを説明します。
平行四辺形のボックスをテキストの疑似要素「before」を使用して設置しました。
桜の背景より前にしたかったので「z-index:1;」を設定して、
更にその前にテキストを出したかったのでテキストのクラス「p-mv__lead」に「z-index:2;」を設定しました。
すると、肝心のテキストが前に出てきません･･･↓
「p-mv__lead」の「z-index」をいくら上げても結果は変わりません。
では、どうすれば表示させることができるのか？？？
z-indexは親要素には反映されない
今回の失敗はまさにここでした。
疑似要素を使用した際、親要素にz-indexをつけても一番上には来ないようです。
とはいえ、ボックスの「z-index」を-1とかにすると、今度は桜の背景の下に潜ってしまいます。
ではどうするか！？
疑似要素でz-indexを使用した時に親要素を一番上にする方法
ではうまく出来たコードをみてみましょう。↓(プレビューは0.5xか0.25xでご覧ください)
See the Pen ブログ用 z-index説明 by そす (@Sosgoyo) on CodePen.
うまくできましたね。ここで修正したのは、
桜背景のクラス「p-mv」に「position:relative;」「z-index:-2;」を設定。
四角形ボックスクラス「p-mv__lead::before」に「z-index:-1;」を設定。
「p-mv__lead::before」の親クラス「p-mv__lead」には「z-index」は付けません。
その代わり、桜背景に「position:relative;」を付けて「z-index」を指定しました。
まとめ
というわけで今回は疑似要素でz-indexを使用した時に、親要素を一番上にする方法についてお話しました。
z-indexの考え方自体は難しくないけど思わぬ落とし穴があるので皆様お気を付けください～。
