2013.02
06

擬似要素 背景


CapD20130206_1
CSSだけで↑みたいな見出しを作ったのですが、これの完成一歩手前が
CapD20130206
のようにめくれた感じの影がついていないものでした。

この状態は、擬似要素:afterを使ったため引き起こされ、
第一階層→見出し
第二階層→背景(方眼紙)
第三階層→めくれた感じの影
という見た目になってました。
この状態を直すには第二階層と第三階層を入れ替えればOKという話です。
しかし、z-indexで階層化すればいいやと思ったけどうまくいかず。

結論から言うと
①static以外のpositionを使う。
②その上でz-indexで階層化
というやり方で解決しました。

html/cssにおける要素の重なり方についての知識が不十分だったので、しばらくハマってました。
なので以下メモ。
■スタックコンテキスト
z-index(auto以外)とposition(static以外)を指定した要素によって生成される階層構造を形成する固まり。

■スタックレベル
z-index位置で指定する階層

大雑把にいうと上記の感じですが、細かく知りたい方は参考URL↓から。

※参考
コピペで出来るCSS3で見出しスタイリング
要素の重なりについて本気出して考えてみた(z-indexとか何とかとか)

ホームページを持ちたいあなたへ フリーランスという選択肢はいかがでしょう?

ページトップへ戻る