Descreva `z-index` e como o contexto de empilhamento é formado.

A propriedade z-index no CSS controla a ordem de empilhamento vertical dos elementos que se sobrepõem. 'z-index' afeta apenas elementos posicionados (elementos que têm um valor de 'posição' que não é 'static') e seus descendentes ou itens flexíveis.

Sem qualquer valor de z-index, pilha de elementos na ordem de exibição no DOM (o menor nível abaixo na mesma hierarquia aparece no topo). Elementos com posicionamento não estático (e seus filhos) sempre aparecerão no topo dos elementos com posição estática padrão, independente da hierarquia HTML.

Um contexto de empilhamento é um elemento que contém um conjunto de camadas. Dentro de um contexto local de empilhamento, os valores de z-index de seus filhos são definidos em relação a esse elemento, ao invés da raiz do documento. Camadas fora desse contexto — ou seja, elementos irmãs de um contexto local de empilhamento — não podem ficar entre as camadas dentro dele. Se um elemento B ficar no topo do elemento A, um elemento filho do elemento A, elemento C, nunca pode ser maior que o elemento B, mesmo que o elemento C tenha um z-index maior que o elemento B.

Cada contexto de empilhamento é auto-contido - após o conteúdo do elemento ser empilhado, todo o elemento é considerado na ordem de empilhamento do contexto de empilhamento do pai. Algumas propriedades CSS desencadeiam um novo contexto de empilhamento, como opacity menor que 1, filter que não é none, e transform que não é none.

Nota: O que exatamente qualifica-se como um elemento para criar um contexto de empilhamento está listado neste longo conjunto de rules.