Índice Z en CSS: qué es y qué hace

¿Qué es un índice Z?

Z Index ( z-index) es una propiedad CSS que define el orden de los elementos HTML superpuestos. Los elementos con un índice más alto se colocarán encima de los elementos con un índice más bajo.

Nota : Índice Z sólo funciona en elementos posicionados (position:absolute,position:relativeoposition:fixed).

Valores posibles

/* Default value if not specified */ z-index: auto; /* Integer values */ z-index: 1; z-index: 100; z-index: 9999; z-index: -1; /* Global values */ z-index: inherit; z-index: initial; z-index: unset;

Cómo utilizar el índice Z

En este ejemplo, puede ver tres cuadros que se muestran uno encima del otro en diferentes órdenes usando z-index.

HTML

CSS

#blue { background-color: blue; } #red { background-color: red; } #green { background-color: green; }

Como z-indexno se definió, tendrá un valor predeterminado de auto. Este es un resultado:

Una imagen de tres cajas.

Intente cambiar el orden a Verde, Azul, Rojo en CSS usando z-index.

#blue { background-color: blue; z-index: 2; } #red { background-color: red; z-index: 1; } #green { background-color: green; z-index: 3; }

Tu resultado será:

Una imagen de tres cajas.

Utilice el índice Z si necesita colocar un elemento de fondo debajo de un contenedor. Puede colocar fácilmente el fondo debajo de cada elemento dándole un índice Z negativo como se muestra a continuación:

#background { z-index: -1; }