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

質問

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

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

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

回答No.3

balloon23 · ベストアンサー

うーん、なればこちらも力技ですｗ

lightbox.jsを開き、「lb-image」を検索してみてください。
<div class='lb-container'><img class='lb-image' src='' />～と、
htmlそのまんまなやつがあります。

imgの直後に空タグを入れ、
<div class='lb-container'><img class='lb-image' src='' /><span></span>

cssでposition:absolute;height:100%;width:100%;を指定。
imgのちょうど全部を覆う形にしたうえで、背景画像としてキラキラを入れる感じです。

やや敷居が高く感じますが、視認性が悪いだけで編集はわりかし簡単です。
ちょっとジャンル変わってしまいますが、参考までにどうぞ。

お礼

ありがとうございます。お忙しい中大変ありがとうございました。

dl {
position: relative;
}

img.brilliantimg {
position: absolute;
display: block;
top: -105px;
right: -60px;
left: auto;
z-index: 999;
}

上記でイメージ通りにいきました。

ただ今度はページを更新したときにぶれる現象が発生しました。
ポジションを使いすぎたからでしょうか？
無理のあるコーディングなのですかね？

補足

ありがとうございます。お忙しい中大変ありがとうございました。

難しいですね。
ここまでくるとやるべきか考え直す必要もあるかもしれませんね。