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

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

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

blog_5th-02

 

 

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

blog_5th-01

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

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

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

blog_5th-03

こういうことですねー。

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

おしゃれ影をつけよう!

HTML

<div id="wrapper">
    <h1 class="title">TITLE</h1>
    <div class="left-column">
        <h2>SUB TITLE</h2>
        <div class="contents">contents</div>
    </div>
    <div class="right-column">SIDE</div>
</div>

CSS

.title{
    width: 100%;
    max-width: 960px;
    padding: 16px 0;
    margin: 0 auto;
    text-align: center;
    line-height: 1;
    background-color: #fff;
    position: relative;
 }
.title:after{
    content: '';
    width: 94%;
    height: 1px;
    -webkit-box-shadow: 0px 1px 7px #000000;
    -moz-box-shadow: 0px 1px 7px #000000;
    box-shadow: 0px 1px 7px #000000;
    position: absolute;
    bottom: 0;
    left: 3%;
    z-index: -1;
    border-radius: 2px;
}

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

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

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

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

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

CSS

.title{
    background-color: #fff;
    line-height: 1;
    margin: 0 auto;
    max-width: 940px;
    padding: 16px 0;
    position: relative;
    z-index: 2;
    text-align: center;
}
.title:before {
    background-color: #fff;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}
.title:after {
    border-radius: 2px;
    bottom: 0;
    box-shadow: 0 1px 7px #000000;
    content: "";
    height: 1px;
    left: 3%;
    position: absolute;
    width: 94%;
    z-index: -2;
}

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

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

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

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

 

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

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