Contextos de empilhamento e Z-index

Digamos que você tenha alguns elementos totalmente posicionados e devem ser posicionadas umas sobre as outras. Você pode escrever um pouco de HTML como este:

<div class="stacked-items">
    <div class="item-1">Item 1</div>
    <div class="item-2">Item 2</div>
</div>

Mas qual fica em cima do outro, por padrão? Para saber qual item faria isso, você precisa entender o Z-index e os contextos de empilhamento.

Z-index

O z-index define explicitamente uma ordem de camadas para HTML com base no espaço 3D do navegador, o eixo Z. Esse é o eixo que mostra quais camadas estão mais próximas e distantes de você. O eixo vertical na Web é o eixo Y, e o eixo horizontal é o eixo X.

cada eixo ao redor do elemento

A propriedade z-index aceita um valor numérico, que pode ser um número positivo ou negativo. Os elementos aparecerão acima de outro elemento se tiverem um valor de z-index maior. Se nenhum z-index for definido nos seus elementos o comportamento padrão é que a ordem da origem do documento determina o eixo Z. Isso significa que os elementos mais abaixo no documento ficam em cima dos elementos que aparecem antes deles.

No fluxo normal, Se você definir um valor específico para z-index e ele não funcionar, defina o valor position do elemento para algo diferente de static. Este é um lugar comum em que as pessoas têm dificuldades com o z-index.

Isso não é o caso se você estiver em um contexto de flexbox ou grade, no entanto, porque é possível modificar o Z-index de itens flexíveis ou de grade sem adicionar position: relative.

Z-index negativo

Para definir um elemento atrás de outro elemento, adicionar um valor negativo para z-index.

.my-element {
    background: rgb(232 240 254 / 0.4);
}

.my-element .child {
    position: relative;
    z-index: -1;
}

Contanto que .my-element tenha o valor inicial de auto para z-index, o elemento .child ficará atrás dele.

Adicione o seguinte CSS a .my-element: e o elemento .child não ficará atrás dele.

.my-element {
  position: relative;
  z-index: 0;
  background: rgb(232 240 254 / 0.4);
}

Porque .my-element agora tem um valor position que não é static e um valor z-index que não é auto, ela criou um novo contexto de empilhamento. Isso significa que, mesmo que você defina .child para ter um z-index de -999, ele ainda não ficaria atrás de .my-parent.

Contexto de empilhamento

Um contexto de empilhamento é um grupo de elementos que têm um pai comum e se movem para cima e para baixo no eixo z juntos.

Neste exemplo, o primeiro elemento pai tiver um z-index de 1; e isso cria um novo contexto de empilhamento. O elemento filho tem um z-index de 999. Ao lado desse pai, há outro elemento pai com um filho. O elemento pai tem um z-index de 2, e o elemento filho também tem um z-index de 2. Como ambos os pais criam um contexto de empilhamento, o z-index de todos os filhos é baseado no do pai.

O z-index dos elementos dentro de um contexto de empilhamento são sempre relativos à ordem atual do pai em seu próprio contexto de empilhamento.

Como criar um contexto de empilhamento

Não é necessário aplicar z-index e position para criar um novo contexto de empilhamento. É possível criar um novo contexto de empilhamento adicionando um valor para as propriedades que criam uma nova camada composta. como opacity, will-change e transform. Você pode confira uma lista completa de propriedades aqui.

Para explicar o que é uma camada composta, imagine uma página da Web como uma tela. Um navegador usa seu HTML e CSS para descobrir o tamanho da tela. Em seguida, ele pinta a página nesse canvas. Se um elemento fosse alterado, por exemplo, ela muda de posição; o navegador precisa voltar e repensar o que pintar.

Para ajudar no desempenho, o navegador cria novas camadas compostas que são dispostas em camadas sobre a tela. Eles são um pouco parecidos com post-its: mover e alterar um item não tem um grande impacto na tela como um todo. Uma nova camada composta é criada para elementos com opacity, transform e will-change, porque eles têm muita probabilidade de mudar, por isso, o navegador usa a GPU para aplicar ajustes de estilo e garante que as alterações tenham o melhor desempenho possível.

Recursos

Teste seu conhecimento

Teste seu conhecimento sobre o Z-index

<section>
  <article>1</article>
  <article>2</article>
  <article>3</article>
  <article>4</article>
</section>

Qual artigo aparece na parte superior por padrão?

3
2
1
4

Se o Z-index não estiver funcionando, que propriedade deve ser inspecionada no seu elemento?

position
animation
display
relative

Flexbox e grid precisam de position: relative?

Não
Sim