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?
animation
display
relative
position
Flexbox e grid precisam de position: relative
?