Superponer una imagen encima de otra en CSS

MexMex · #1 (**permalink**) 26/12/2012, 23:09

Saludos

Quiero saber como superponer una imagen sobre otra usando CSS.

Hagan de cuenta que tengo esta imagen o cualquier otra en el blog;

Y quiero que esta imagen se superponga;

Para que quede más o menos así;

Esto sería para poner recordatorio de diferentes fechas o eventos en el blog.

Quisiera saber si hay un código para que esto sea automático algo así como un plugin para Wordpress.

Gracias.

pzin · #2 (**permalink**) 27/12/2012, 11:37

Sin nada de HTML cualquier cosa que se te diga seguramente no te funcionará porque sin código partimos de la base que sólo son dos imágenes y para lograr lo que quieres bastaría con darle una posición relativa a la segunda imagen. Pero seguramente el escenario —HTML— sea algo más complejo que sólo dos imágenes.

sebastopols · #3 (**permalink**) 27/12/2012, 11:41

Podrías probar la propiedad z-index, algo así, saludos

:

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
<style>
 
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
 
.img2
{
position:absolute;
left:40px;
top:40px;
z-index:-3;
}
 
</style>
</head>
 
<body>
 
<img src="w3css.gif" width="100" height="140" />
<img src="w3css.gif" width="100" height="140" class="img2"/>
 
 
</body>
</html>

pzin · #4 (**permalink**) 27/12/2012, 12:51

En la medida de lo posible es preferible no usar z-index con valor negativos, por aquello de que luego no se puedan seleccionar cosas.

De todas formas, como ya dije, dudo que pueda usar esa solución ya que seguramente ese no sea el HTML que esté usando.

sebastopols · #5 (**permalink**) 27/12/2012, 13:04

Es una solución que brinda la w3s, en el caso de que el usuario esté buscando una solución para cms debería moverse el hilo.