📰

疑似要素を親要素の背面に配置したい時のCSSメモ（z-indexとスタッキングコンテキスト）

に公開
CSS
HTML 5
tech

結論&コード

結果

.outer（背景）
↓
.inner::before
↓
.inner（本体）
の順で重なる

HTML

index.html
<div class="outer">
    <div class="inner"></div>
</div>

CSS

style.css
.outer {
    position: relative;
    z-index: 0;
}
.inner {
    position: relative;
}
.inner:before {
    position: absolute;
    z-index: -1;
}

解説

前提

疑似要素は基本、親要素の後ろにはいかない。
しかしそうも言ってられない時用の裏技

仕組み

疑似要素にz-index:-1をつける

基本的に疑似要素（子要素）は親要素の上にしか乗っかれない
という前提をここで壊せる
しかし、これだけだと疑似要素がhtml世界の底辺に沈み.outerの更に後ろにいってしまう…
html世界の住民たちは設定がない場合、デフォルトでz-index=0 に設定されているためである
それを解決するために

.outerにz-indexを付けてスタッキングコンテキスト発動

前提で、親にz-indexが付いている場合、子要素は何があっても親より後ろにはいけない。（それはスタッキングコンテキストが発動するため。詳しい説明は後述リンク先）
よって、.outerにz-indexをつけることで疑似要素を最底辺の世界から救うことができるのだ
ちなみにこのz-indexは0以上ならなんでもよいです。その場の状況で決めてください

.innerにz-index=0をつけないのはなんで？

親にz-indexが付いている場合、子要素は何があっても親より後ろにはいけない（スタッキングコンテキストが発動するため）
がこちらにも適応されてしまうからです。
子要素にz-index:-1がついていようと、子たちの中でのz-indexバトルになるだけで、親が最底辺なのは絶対！という状況になる。

まとめ

１．孫をz-index:-1で潜らせる
２．親にz-indexをつけてスタッキングコンテスト発動（=親の子要素たちは何があろうと親より後ろに潜れない状況）
３．子要素はノータッチのため、子より孫は潜ったまま"子>孫>親"を実現できる

スタッキングコンテキストってなあに？

君は真に理解しているか？z-indexとスタッキングコンテキストの関係 - ICS MEDIA
https://ics.media/entry/200609/
こちらの記事がめちゃわかりやすかったです。

Discussion