CSSだけで↑みたいな見出しを作ったのですが、これの完成一歩手前が
のようにめくれた感じの影がついていないものでした。
この状態は、擬似要素:afterを使ったため引き起こされ、
第一階層→見出し
第二階層→背景(方眼紙)
第三階層→めくれた感じの影
という見た目になってました。
この状態を直すには第二階層と第三階層を入れ替えればOKという話です。
しかし、z-indexで階層化すればいいやと思ったけどうまくいかず。
結論から言うと
①static以外のpositionを使う。
②その上でz-indexで階層化
というやり方で解決しました。
html/cssにおける要素の重なり方についての知識が不十分だったので、しばらくハマってました。
なので以下メモ。
■スタックコンテキスト
z-index(auto以外)とposition（static以外）を指定した要素によって生成される階層構造を形成する固まり。
■スタックレベル
z-index位置で指定する階層
大雑把にいうと上記の感じですが、細かく知りたい方は参考URL↓から。
※参考
コピペで出来るCSS3で見出しスタイリング
要素の重なりについて本気出して考えてみた（z-indexとか何とかとか）
