martes, 24 de enero de 2023

Cómo superponer una imagen sobre otra con CSS

Si quieres poner una imagen encima de la otra, ambas imágenes deben estar posicionadas de forma absoluta, en otro caso no se pueden colocar una encima de la otra.

Una vez tienes una foto sobre la otra debes hacer uso del Z-index para indicar en qué orden se deben renderizar las imágenes.

Veamos el funcionamiento con un ejemplo.

HTML.

<img src="https://childmind.org/wp-content/uploads/2021/08/care-photo.png" class="img" />
<img src="https://childmind.org/wp-content/uploads/2021/08/CMI_GrowthRings-Care.svg" class="img2">/>


CSS.

<style> img { position:absolute; left:0px; top:0px; z-index:-1;width:30%;height:auto; } .img2 { position:absolute; left:40px; top:10px; z-index:-3; } </style>


RESULTADO.



¡¡Aprender es interesante y divertido!!


Salu2 y bendiciones,
Atte, Angel Paz
Duda con el Efecto rayo 71pkhu