web-dev-qa-db-fra.com

Superposition Div sur l'image

J'ai donc un <div> avec positionnement relatif et un enfant <img> avec positionnement absolu.

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

Le problème est qu'il doit être en haut (plus haut sur l'axe des ordonnées ou plus près du haut de l'écran), mais il ne se mesure qu'en distance du bas.

htmlcssoverlay
10
user3238291

Utilisez z-index et top. Cela superposera la div en bas, l'image et ensuite la plage (superposition) en haut. Pour définir le positionnement à partir du bord supérieur, utilisez top, qui peut être utilisé avec des nombres négatifs si vous souhaitez que les valeurs soient plus élevées sur l'axe des Y que sur leur parent. L'exemple ci-dessous déplacera l'intervalle 10px au-dessus du sommet de son div parent.

<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

C’est dans certains cas une meilleure solution, ainsi la division parent obtient la hauteur de l’image:

<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