Propiedad z-index de 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 los elementos HTML de una página web (como se trabaja por ejemplo con Photoshop). De modo que podemos superponer unos elementos encima de otros a nuestro antojo.

La implementar 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 los elementos que vayan a llevar el z-index para que se encuentren en la misma posición. La sintaxis en la CSS quedaría algo así:

.elemento1 {
    position: absolute;
    z-index: 10;
}
.elemento2 {
    position: absolute;
    z-index: 20;
}
.elemento3 {
    position: absolute;
    z-index: 30;
}

El elemento con la clase .elemento3 quedaría encima de todas, .elemento2 inmediatamente detrás y .elemento1 detrás de todas. Así pues, como comentamos antes, los valores en la CSS determinan la profundidad de las capas.