Posterior a investigar con especialistas en este tema, programadores de deferentes ramas y maestros dimos con la solución al dilema y la dejamos plasmada en esta publicación.
Solución:
Necesita un contenedor relativo alrededor de su imagen y luego configura su icono para que esté en posición: absolute.
.container position: relative;
.container img display: block;
.container .fa-download position: absolute; bottom:0; left:0;
La razón por la que necesitas que tu img sea display: block es porque, por defecto, imgson display: inline y su img tendrá un espacio entre la parte inferior y la parte inferior del contenedor, por lo que su ícono de descarga aparecerá ligeramente debajo de su img. Configurándolo en display: block detiene esto.
Para superponer dos elementos, un enfoque es hacer un padre position: relativey luego la superposición position: absolute.
En este caso, este ejemplo debería funcionar, donde el icono de descarga puede ser cualquier elemento, como un botón de arranque.
.img-download
position: relative;
.img-download > a
position: absolute;
background: white;
bottom: 0;
left: 0;
Te mostramos las comentarios y valoraciones de los usuarios
Si te ha sido útil este post, te agradeceríamos que lo compartas con el resto entusiastas de la programación de este modo contrubuyes a extender este contenido.