wake-up-neo.net

Überlagern Sie Div auf Bild

Ich habe also einen <div> mit relativer Positionierung und er hat einen untergeordneten <img> mit absoluter Positionierung.

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

Das Problem ist, dass es oben sein muss (höher auf der Y-Achse oder näher an der Oberseite des Bildschirms), es wird jedoch nur der Abstand von unten gemessen.

10
user3238291

Verwenden Sie z-index und top. Dadurch wird das div am unteren Rand, das Bild und dann der Abstand (Overlay) darüber gelegt. Verwenden Sie top, um die Positionierung von der oberen Kante aus festzulegen. Diese Variable kann mit negativen Zahlen verwendet werden, wenn sie auf der Y-Achse höher sein soll als die übergeordnete. Im folgenden Beispiel wird der Bereich um 10 Pixel über den oberen Rand des übergeordneten Divs verschoben.

<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>
12
Joe Conlin

Dies ist in manchen Fällen eine bessere Lösung, daher erhält das übergeordnete div die Höhe des Bildes:

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