imagemapster Web サイトで参照されているビートルズのサンプル jsfiddle で遊んでいます。キャプション div を画像の上に表示するように配置する方法はありますか?
上記のjsfiddleで、私は試しました:
<div id="beatles-caption" style="clear:both; border:red; width:400px;
padding: 6px; position:relative; top:-100px;">
z-index も試しましたが、キャプションを画像に移動することに成功していません。
私自身のアプリケーションでは、ページ全体の背景画像があり、画像の右上に重ねられたキャプション div で画像のさまざまな部分を識別する必要があります。
この要件を考えると、従うべきより良い例はありますか?
これはあなたが探しているものですか？
jsfiddle.net/nYkAG/408/
注: 変数の高さは考慮されていません。プラグインをコンテナーにラップし、position:relative を設定してから、top から bottom:0 に変更できます。
キャプションを画像の上に移動するというあなたの仮定position:relative; top:-100px;は正しいです。が欠けているだけですz-index。
#beatles-caption { position:relative; top:-100px; z-index:1000; background:white; }
http://jsfiddle.net/nYkAG/409/
負のマージンを使用することもできます。
#beatles-caption { position:relative; margin-top:-100px; z-index:1000; background:white; }
または、キャプションposition:relativeを付けて div で全体をラップしますposition:absolute; bottom:0