Podcast sobre o CSS - 019: Z-index e contextos de empilhamento
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.
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?
Se o Z-index não estiver funcionando, que propriedade deve ser inspecionada no seu elemento?
displayrelativepositionstatic.animationFlexbox e grid precisam de position: relative?
position: relative.