La propiedad z-index, de CSS, nos ayudará a determinar qué elementos se superponen con los otros. Variando el valor de dicha propiedad, daremos el orden a la superposición de los elementos, a menor valor, mayor profundidad de superposición.

Por ejemplo tenemos dos div en el que hay dos imágenes, una con CSSBLOG y la otra con su icono. El icono, que tiene un z-index de un 1, aparecerá detrás de CSSBlog, que tiene un z-index de un 2, como vemos en la imagen:

Captura de pantalla 2013-09-28 a la(s) 21.11.55

 

Código HTML

Select Code
<div id="logo"><img src="http://www.cssblog.es/archivos/cssblog-2.jpg" title="z-index:1;" alt="z-index:1;" /></div>
<div id="cssblog"><img src="http://www.cssblog.es/archivos/cssblog.png"  title="z-index:2;" alt="z-index:2;" /></div>

Código CSS

Fijaros en la diferencia del valor z-index en cada ID, en uno es 1, y en el otro es 2 (el que está superpuesto).

Select Code
#logo {
position:absolute;
top:150px;
left:150;
z-index:1;
}
#CSSBLOG {
position:absolute;
top:200px;
left:200;
z-index:2;
}

Ejemplo de su funcionamiento

Podemos ver el ejemplo de su funcionamiento aquí:

Si te ha gustado este artículo, puedes recibir gratis más y mejor por RSS, Twitter, Facebook o correo electrónico. ¡Muchas gracias por leerme!