HTML/CSS - ¿Poner img encima de img?

Question

Tengo dos png. Una es la imagen real, otra es una imagen en su mayoría transparente con un icono de precio de etiqueta en la parte superior derecha. Sé que podría combinarlos en Photoshop y solo crear una imagen.

Pero necesito que estos se generen de forma dinámica, para un conjunto de diferentes imágenes base.

¿Hay alguna manera de codificar la "imagen real" y luego usar el código para superponer la "imagen de la etiqueta transparente"?

Answer 1

Deberá establecer el atributo de posición en relativo o absoluto, establecer los atributos izquierdo y superior en los valores deseados, luego establecer el atributo z-index en 1 (suponiendo que no tenga otro z-index propiedades ya establecidas). Tenga en cuenta que el lugar donde se supone que debe representar la imagen sin los atributos superiores e izquierdos modificados, habrá un espacio donde debería estar.

Answer 2

Sin duda, la manera más fácil sería la de colocar de manera absoluta tanto las imágenes dentro de su contenedor:

<div style="position:relative"> 
    <img src="main-image.jpg" style="position:absolute;"/> 
    <img src="overlay-image.png" style="position:absolute;"/> 
</div> 

El position:relative en el envase se necesita para el posicionamiento absoluto de los niños a trabajar. Por supuesto, si el contenedor ya está completamente posicionado, está bien.

El position:absolute es no es necesario en la imagen base si ambas imágenes están en la esquina superior izquierda, pero tener que le permite ajustar su colocación si es necesario.

También es posible usar la posición estática en la imagen principal y la posición relativa de la imagen superpuesta en:

<div style="position:relative"> 
    <img src="main-image.jpg" style="width:100px"/> 
    <img src="overlay-image.png" style="position:relative; left:-100px"/> 
</div> 

pero para que esto funcione que había necesidad de conocer el ancho de la imagen de base.

Answer 3

Envuelva las imágenes en un <div> con la imagen de superposición primero y la imagen real en segundo lugar, y puede establecer el css del div en position: relative.

Las dos imágenes pueden tener el css {position: absolute; top: 0; left: 0;}.

<div style="position:relative;"> 
    <img src="overlay.png" style="position: absolute; top: 0; left: 0;"> 
    <img src="actual.png" style="position: absolute; top: 0; left: 0;"> 
</div>` 

Si realmente quiere estar seguro, se puede establecer el z-index de cada imagen.