画像を乗っけたいのですが、うまくいかない。

質問

下記サイトのコンテンツのライトボックスの上にキラキラした画像を乗っけたいのですが、乗っけたところ画像の下に入ってしまいます。

z-indexなどを使ったのですがそれでも下になります。上に重ねる方法があれば教えてください。

http://sample1.digi2.jp/yufu/index.html

回答No.8

ORUKA1951

煩雑ですか？？
HTMLは、今後のHTML5を念頭において作成してあります。
・class名はそのまま要素に置き換えられること
　<div class="header">→<header>
・文書構造しか書かない
　<div class="section"><div class="nav"
・sectionはhn見出しとセットで検索エンジンは文書のアウトラインを形づくる(目次を作る)
　ためdlではなくsectinに組み合わせてあります。
・後日のメンテナンスを重視してあります。顧客の担当者でも手が入れられるように
CSSは、
・後方互換のため子供セレクタではなく子孫セレクタにしてある。
　　body>div.section{} body>div.section>section{}のほうが楽ですがIE7は認識しません。

・他の場所に登場したときは適用されないように文書構造がセレクタに書いてある。
　　headerに登場するnavとsectionやfooterに登場したときが区別されるように
この二点のため、CSSはちょっと冗長な部分があります。セレクタや詳細度が計算できるまで慣れれば楽になるでしょう。
　そのかわり、デザインを全く変える場合もHTMLには手を加えなくてよいようになっています。

＞dlは使わないのですね。タイトルが無いからなんでしょうね。
　内容的に、文書のアウトラインが作られるとき、HTML5では(HTML4.01でも)、sectionはひとつの見出し(h1～h6)とセットで使用されます。
　内容的にアウトラインに含まれるべき内容ですのでsection+h3とマークアップしました。
ルート
|-- header
|　　┗h1
|-- section
　　　|┗ h2
　　　|-- section
　　　|　　　┗ h3
　　　|-- section
　　　　　　┗ h3
　⇒The section element | HTML5 Doctor( http://html5doctor.com/the-section-element/ )
　⇒4.4.6 The h1, h2, h3, h4, h5, and h6 elements( http://www.w3.org/TR/html5/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements )

　他者へのアドバイスですから、可能な限り仕様に沿った形にせざるを得ないのです。

　なお、示したサンプルではリンクがキラキラ画像にも効いてきますが、それを避けたければa要素の:afrer擬似クラスにではなくdiv.figure:afterにして、a:afterはその上に置くと良いでしょう。

お礼

なお、示したサンプルではリンクがキラキラ画像にも効いてきますが、それを避けたければa要素の:afrer擬似クラスにではなくdiv.figure:afterにして、a:afterはその上に置くと良いでしょう。

参考になります。