La propiedad z-index determina el orden de apilamiento de los elementos posicionados en una página web. Solo se aplica a los elementos posicionados, es decir, aquellos que tienen un valor de posición absolute, fixed, relative o sticky. Como estos elementos se sacan del flujo normal del documento, para determinar cuál de estos elementos posicionados debe mostrarse por encima o por debajo, se especifica z-index.

z-index: number_without_units

Cuanto mayor sea el valor de la propiedad z-index, más arriba se mostrará el elemento en la pantalla del usuario.

Vamos a practicar. Tenemos cuatro elementos div con la clase box, cada uno estilizado como un cuadrado y numerado para representar su orden en el documento html. Actualmente, los cuadrados están posicionados uno encima del otro. La tarea consiste en ajustar la propiedad z-index con los valores correctos para llevar el cuadrado 3 al frente y enviar el cuadrado 4 al fondo.

Nota

Si asignamos el mismo valor a la propiedad z-index en diferentes elementos, el navegador mostrará los elementos en el orden en que aparecen en el archivo html.