css - CSSで他のアイテムをオーバーレイするアイテムの負のマージンに代わるものはありますか?

Question

私はこのようなマークアップを持っています:

<p>Image caption</p><img />

p はインラインブロックです。

画像を左に押すのではなく、キャプションを画像に重ねて表示したい。通常、margin-right -"x"px; でこれを行いますが、画像キャプションの幅がわからないため、この手法を使用できません。良い代替手段はありますか？（テキストには背景色があるため、ブロック要素は使用できません）

score 1 · Accepted Answer

相対的に配置された div 内にアイテムを絶対配置することを考えましたか?

たとえば、p と img を div でラップし、div に position:relative を追加してから、p と img に position:absolute を追加し、それらの要素を左または右に配置します。

score 0 · Accepted Answer

別の代替手段は、固定サイズの div を使用し、画像を背景として使用することですか? そうすれば、絶対位置と相対位置をいじる必要なく、テキストがオーバーレイされます。マット

score 0 · Accepted Answer

divその周りに置きます：

<div><p>Image caption</p><img /></div>

の幅を指定し、がの上にdiv来るようにします。次に、div で使用して画像を中央に配置できます。imgppadding: 0 auto;

score 0 · Accepted Answer

p と img を div でラップします。

<div>
<p>Image caption</p>
<img /> 
</div>

次に、以下のスタイリングを使用します。

div {
  position: relative;
  float:left;
}
p {
  position: absolute;
  top: 20px;
  left: 10px;
}

それに応じて上と左の値を調整し、必要に応じて上と左の代わりに下または右を使用することもできます。

score 0 · Accepted Answer

ここに書かれている解決策は、私のサイトでは不可能でした (技術的には正しいのですが)

私の解決策は

<p>
    <span>Image caption<span>
</p>
<img />

その後

p{
    display:block;
    margin-right -100%;
}

追加のマークアップがありますが、私と同じ道を歩いている人に役立つことを願っています!

5 に答える 5