Propiedad z-index, profundidad de capas en CSS

Hoy vamos a aclarar para que se usa la propiedad z-index de CSS al hacer una web, ya que si la dominamos puede ser de gran utilidad a la hora de realizar estructuras complejas.

Esta propiedad se usa en CSS para darle profundidad a las capas HTML de una web (como se trabaja por ejemplo con Photoshop). De modo que podemos superponer unos div encima de otros a nuestro antojo.

La manera de usar z-index es sencilla: la añadimos al estilo donde queramos aplicarla, le asignamos un valor numérico (no importa cuál sea) y dependiendo del valor, se posicionarán por encima o por debajo unas de otras. De los valores más altos a los más bajos representarán el nivel de profundidad de delante hacia atrás respectivamente.

Es importante ponerle la propiedad position:absolute a las capas que vayan a llevar el z-index para que los div se encuentren en la misma posición. La sintaxis en la CSS quedaría algo así:

#capa1{
position:absolute;
z-index:10;
}
#capa2{
position:absolute;
z-index:20;
}
#capa3{
position:absolute;
z-index:30;
}

La capa con el estilo capa3 quedaría encima de todas, la capa2 inmediatamente detrás y la capa1 detrás de todas. Así pues, como comentamos antes, los valores en la CSS determinan la profundidad de las capas.