La propiedad
z-indexespecifica el orden de pila de un elemento.
La propiedad z-index
Cuando los elementos se posicionan, pueden superponerse a otros elementos.
La propiedad z-index especifica el orden de apilamiento de un elemento (qué elemento debe colocarse delante o detrás de los demás).
Un elemento puede tener un orden de pila positivo o negativo:
Ejemplo:
Nota:
z-indexsolo funciona en elementos posicionados (position: absolute,relative,fixedosticky) y elementos flexibles (elementos que son hijos directos dedisplay: elementos flexibles).
Otro ejemplo z-index
Ejemplo:
Aquí vemos que un elemento con mayor orden de apilamiento siempre está por encima de un elemento con menor orden de apilamiento.
Sin la propiedad z-index
Si dos elementos posicionados se superponen sin especificar z-index, el último elemento definido en el código HTML se mostrará en la parte superior.
Ejemplo:
El mismo ejemplo que el anterior, pero aquí sin especificar z-index:
Resumen
La propiedad z-index en CSS especifica el orden de apilamiento de un elemento y solo funciona en elementos posicionados o flexibles. Si no se especifica z-index, el último elemento definido en el código HTML se mostrará en la parte superior.
Traducido con 💚 desde W3Schools.com