La propiedad z-index indica el z-order (orden de apilamiento) de un elemento y sus descendientes.
Cuando varios elementos se superponen, el z-index determina cuales cubren a otros.
Un elemento con mayor z-index cubre a otro menor, siempre que estén en el mismo contexto de apilamiento.
Valor por defecto de z-index.
Cuando todos los elementos tienen este valor, los elementos se van apilando en el eje z por orden de creación.
Por lo tanto, el último elemento creado será el que esté por encima del resto.
Este elemento tiene position: relative;
Cada elemento con un valor entero de z-index establece un nuevo contexto de apilamiento.
Este elemento tiene position: relative;
Los elementos hijos que definan su z-index van a ser comparado con sus hermanos y no con elementos que estén fuera de su padre.
Este elemento tiene position: relative; y establece un nuevo contexto de apilamiento con z-index: 0;
Una buena práctica es crear una clase CSS por cada capa que haya en la aplicación y asignarle un valor de z-index.
Luego se asigna la clase a los elementos que se ubiquen en dicha capa.
Ejemplos de capas pueden ser: .modal, .sidenav, .popover
Este elemento tiene position: relative;