web-dev-qa-db-ja.com

画像にDivをオーバーレイ

だから私は<div>相対的な位置付け、および子<img>絶対位置付け。

<div style="position: relative;">
  <img src="image.png" style="position: absolute;" />
  <span id="overlay_text">OVERLAY</span>
</div>

問題は、上部にある必要があることです（Y軸の上部、または画面上部に近い）が、下部からの距離でのみ測定されます。

htmlcssoverlay
12
user3238291

使用する z-indexおよびtop。これにより、divが下に、画像が上に、そしてスパン（オーバーレイ）が上に重ねられます。上端から位置を設定するには、topを使用します。これは、親よりもY軸上で高くする必要がある場合に負の数で使用できます。以下の例では、スパンをその親divの上部から10px上に移動します。

<div style="position: relative; z-index: 1;">
  <img src="image.png" style="position: absolute; z-index: 2;" />
  <span id="overlay_text" style="position: relative; top: -10px; z-index: 3;">OVERLAY</span>
</div>
15
Joe Conlin

これは場合によってはより良い解決策であるため、親divは画像の高さを取得します。

<div style="position: relative; z-index: 1;">
  <img src="image.png" />
  <span style="position: absolute; top: 0px; z-index: 3;">OVERLAY</span>
</div>
2
kenny