Podcast sobre o CSS - 019: Z-index e pilhas de contexto (em inglês)
Digamos que você tenha alguns elementos que estão absolutamente posicionados e que devem ser posicionados uns sobre os outros. Você pode escrever um pouco de um 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 da outra, por padrão? Para saber qual item faz isso, você precisa entender o Z-index e os contextos de empilhamento.
Z-index
A propriedade 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 perto e mais longe de você.
O eixo vertical na Web é o eixo Y e o eixo horizontal é o 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 se tiverem um valor z-index
mais alto.
Se nenhum z-index
for definido nos elementos,
o comportamento padrão é que a ordem de origem do documento determine o eixo Z.
Isso significa que os elementos mais abaixo no documento ficam sobre os elementos que aparecem antes deles.
No fluxo normal,
se você definir um valor específico para z-index
e ele não estiver funcionando,
será necessário definir o valor position
do elemento como algo diferente de static
.
Esse é um lugar comum em que as pessoas têm dificuldade com o z-index
.
No entanto, isso não vai acontecer se você estiver em um contexto de grade ou flexbox,
porque é possível modificar o Z-index de itens flexíveis ou da grade sem adicionar position: relative
.
Z-index negativo
Para definir um elemento atrás de outro,
adicione 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 ao .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);
}
Como .my-element
agora tem um valor de position
que não é static
e um valor de z-index
que não é auto
,
um novo contexto de empilhamento foi criado.
Isso significa que, mesmo que você defina .child
para ter um z-index
de -999
,
ele ainda não fica atrás de .my-parent
.
Contexto de acumulação
Um contexto de empilhamento é um grupo de elementos que têm um pai comum e que se movem para cima e para baixo no eixo z juntos.
Nesse exemplo,
o primeiro elemento pai tem um z-index
de 1
,
então, 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 os dois 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
é sempre relativo à ordem atual do pai no próprio contexto de pilha.
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
.
Veja uma lista completa de propriedades aqui.
Para explicar o que é uma camada composta, imagine que uma página da Web é uma tela. O navegador usa seu HTML e CSS para determinar o tamanho do canvas. Em seguida, ele pinta a página nessa tela. Se um elemento mudar (por exemplo, de posição), o navegador terá que voltar e redefinir o que pintar.
Para ajudar no desempenho,
o navegador cria novas camadas compostas que são colocadas em cima da tela.
Esses são um pouco como post-its:
mover um e alterá-lo não tem um grande impacto no canvas geral.
Uma nova camada composta é criada para elementos com opacity
,
transform
e will-change
porque eles têm grandes chances de mudar.
Por isso, o navegador usa a GPU para aplicar ajustes de estilo e garantir o melhor desempenho possível para essa mudança.
Recursos
Teste seu conhecimento
Teste seus conhecimentos sobre z-index
<section> <article>1</article> <article>2</article> <article>3</article> <article>4</article> </section>
Qual artigo é exibido na parte superior por padrão?
Se o Z-index não estiver funcionando, qual propriedade você precisa inspecionar no elemento?
display
relative
position
static
.animation
O flexbox e a grade precisam de position: relative
?
position: relative
.