擬似要素のz-indexで失敗【CSS】

こんにちは、yasaiです!
5月も終わりますね。GWとGW明けの業務が目白押しだった5月が終わって、祝日のない6月がやってきますね(泣)

今日はCSSのお話です。「おしゃれシャドーつけてみよう」です。
擬似要素のz-indexでうまいこと表示に失敗した話です。

blog_5th-02

 

 

今回コーディングに当たってこんな感じのデザインいただいたのです。

blog_5th-01

メインタイトルがサイト幅いっぱいで、そこから2カラムパターンですね。ふむふむ。

それでもってメインタイトルはドロップシャドウがついてて、2カラム部分にかかってるわけですね。スマホのときも同じ感じで。はい、了解です。

んー、このシャドウってタイトル全体より短くてセンターな感じです?あ、はい、了解です。(単純にドロップシャドウじゃないのね、おしゃれしゃどー)

blog_5th-03

こういうことですねー。

やり方は色々ありそうだけど。今回はメインタイトルの後ろに幅のちょっと短い%の擬似要素を置いてそいつにドロップシャドウしましょう。これでいくことにしました。ざっくりいきます。

おしゃれ影をつけよう!

HTML

CSS

こんな感じですかね?影つきました!ちゃんとブラウザ幅に合わせて縮小もできてるし、良かったよかった!

やったことは、TITLEの94%の幅でbox-shadowを設定したafter擬似要素をTITLEの後ろに置いたということですね。影の部分がうまく出るようにbottomで調節して、シャドウの上の部分が出ないように、TITLEに背景色を設定したということです。

と、まぁできたと思って、他のとこのコーディングしてたんですけど・・・

影がコンテンツの下にあるよ!!

blog_5th-04ざっと組んで見直して、まぁ気がつくわけですよね。(2カラム部分に背景とかを後からつけたので、発見が遅れた・・・)擬似要素が他のコンテンツの後ろにいますねーこれじゃダメです?だめ?ですよねー修正します。

CSS

修正したのは親となるTITLEのz-indexを設定したこと。

これでHTML全体のルートに対しての.titleのz軸の位置関係を明示して、それに対する擬似要素の位置関係を設定したということですかね。考えてみたらそりゃそうか、という気もしますね。

z-indexが2でbefore擬似要素が追加になっているのは他の要素との兼ね合いか、after擬似要素を他のコンテンツの上にのせる関係で、after擬似要素がTITLEの上にのってしまったためその上にTITLEと同じ大きさで背景色がTITLEと同じbefore擬似要素を間に差し込んだため。

ここまでくると、もっと簡単な方法があったかな、という気もしますね。何かもっといい方法あるよという方は、コメントお願いします。CSSだけで色々な表現ができるようになって楽しいですね。もっと勉強しなくちゃなと痛感です。

 

今回参考にさせていただいたサイト様です。ありがとうございました。

要素の重なりについて本気出して考えてみた(z-indexとか何とかとか)