Tenho escrito software “para ganhar a vida” há mais de dez anos. Receio ter que admitir que, por mais de dez anos, venho usando z-indexsem realmente entender.
z-indexé uma propriedade CSS usada para posicionar elementos acima ou abaixo uns dos outros. É a sua arma preferida se você tiver dois elementos sobrepostos e quiser decidir qual deles fica por cima. É bastante útil para modais, dicas de ferramentas, banners, etc. Você pode configurá-lo como um número inteiro e um valor maior geralmente resultará na renderização do elemento acima do resto.
Isso é tudo que eu sabia sobre isso.
Normalmente, isso é ótimo em software: “Aprenda o suficiente para ser perigoso” , dizem eles. Mas, invariavelmente, eu me pegava lutando z-indexe gastando horas tentando entender o que há de errado com a Vida, o Universo e tudo.
Tenho certeza de que não sou só eu. É comum encontrar CSS assim:
índice z: 99999
O que é praticamente o equivalente ao desenvolvedor dizendo:
isso é muito selvagem, tchau
Bem, vamos lidar com essa besta com alguns exemplos.
A configuração
Criei um pequeno aplicativo para facilitar as coisas. Se parece com isso:
As caixas à direita são posicionadas estaticamente. Este é o padrão quando você não especifica uma positionpropriedade, portanto, uma caixa posicionada estaticamente também é conhecida como uma caixa não posicionada . Eu adicionei algumas margens negativas para que elas se sobreponham.
No lado esquerdo, você pode digitar alguns estilos que serão aplicados às caixas. Observe que você também pode compartilhar a configuração copiando o URL. Vamos começar agora!
Questões de pedidos
Este é o HTML que alimenta a página:
<div class="purple"></div>
<div class="blue">
<div class="green"></div>
<div class="yellow"></div>
</div>
<div class="red"></div>Como você pode ver, o pedido no HTML é importante. A caixa vermelha é posicionada acima do resto porque aparece mais tarde no código.
Z-index não funciona sozinho
Olha isso :
Essa é a regra número um:
O z-index funciona apenas em elementos posicionados.
Portanto, z-indexsó funciona em elementos que têm uma positionpropriedade definida como:
relativeabsolutefixedsticky
Lá vamos nós:
Você seria capaz de adivinhar o que acontece quando removemos a z-index propriedade deste exemplo? Vá em frente, vou esperar.
Isso é o que vemos:
Acontece que as caixas posicionadas aparecem no topo das caixas não posicionadas. Se você estiver inclinado, a especificação entra em muito mais detalhes.
Mas se todas as caixas estiverem posicionadas, voltamos a seguir a ordem no código-fonte HTML. Olha isso :
E nesse ponto, especificar um z-index funciona !
Usando os poderes de z-index, fomos capazes de reverter a ordem de empilhamento padrão das caixas. Vá conosco.
Um novo mistério
Vejamos este exemplo :
Das três caixas posicionadas, a amarela tem z-index: 1e, portanto, aparece no topo. Bom, o mundo está fazendo sentido.
Mas e se dermos um z-indexpara a caixa azul, o pai da caixa amarela? Nosso exemplo seria parecido com este :
O que está acontecendo aqui? Nossa caixa amarela agora está renderizada abaixo da vermelha ?! Tudo isso porque adicionamos um z-index: 0ao azul ?! O mundo não está fazendo sentido novamente. 😿
Vamos dar um pequeno desvio …
Auto não é zero
Se não definirmos a z-indexpropriedade de um elemento, seu valor padrão será auto. Esses elementos aparecerão na frente dos elementos com z-indexvalores negativos e abaixo dos elementos com z-index valores positivos . Isso deve convencê-lo de que não estou mentindo:
Então, de certa forma, esse elemento se comporta como se tivéssemos definido z-index: 0. Na verdade, se adicionarmos essa regra CSS, não veremos mudanças notáveis na saída :
Mas as coisas mudaram muito! Atribuir um valor a z-indexuma caixa relativamente posicionada cria um novo contexto de empilhamento .
Um empilhamento o quê? MDN diz:
O contexto de empilhamento é uma conceituação tridimensional de elementos HTML ao longo de um eixo z imaginário em relação ao usuário, que se supõe que esteja de frente para a janela de visualização ou página da web. Os elementos HTML ocupam este espaço em ordem de prioridade com base nos atributos do elemento.
Achei que era isso que estávamos tentando fazer o tempo todo. Vamos continuar lendo.
A parte interessante vem depois:
Em um contexto de empilhamento, os elementos filhos são empilhados de acordo com as mesmas regras explicadas anteriormente. É importante ressaltar que os valores do z-index de seus contextos de empilhamento filho só têm significado neste pai.
Esse é o ponto chave. Um contexto de empilhamento forçará o z-indexde seus contextos de empilhamento filho a ter apenas um significado local. Vejamos nosso exemplo misterioso novamente:
A configuração z-index: 0na caixa azul mudou o significado da z-index declaração na caixa amarela. Antes, a caixa amarela estava lá brincando com os meninos grandes. Agora, isso só pode afetar o empilhamento dentro da caixa azul.
Isso é uma grande causa de frustração. Não importa o quão alto você defina uma z-indexpropriedade, você nunca será capaz de ‘escapar’ do contexto de empilhamento pai. E toda vez que você está lutando para fazer um z-index trabalho, pode apostar que é porque algo criou um contexto de empilhamento do qual você não pode escapar.
Com esse novo entendimento, passe algum tempo explicando por que este exemplo faz todo o sentido:
Lembre-se também de que dissemos que os elementos posicionados aparecem acima dos elementos não posicionados? Bem, agora podemos generalizar dizendo que os elementos que formam um contexto de empilhamento aparecem no topo dos elementos não posicionados.
Os suspeitos do costume
O artigo MDN lista todos os casos em que um novo contexto de empilhamento é formado. Vou revisar uma lista de suspeitos do costume.
Opacidade menor que 1
Efeitos de transformação e filtro
Filho flexível com índice z
Grade filho com Z-index
Alguns desses exemplos podem parecer surpreendentes. Em geral, a razão subjacente pela qual essas configurações criam um novo contexto de empilhamento é que elas são renderizadas em um contexto fora da tela. Mas, na prática, você não precisa se lembrar de todos eles: quando você se depara com uma situação em que z-indexnão está funcionando como planejado, pode verificar rapidamente se há um contexto de empilhamento descontrolado que o está mantendo trancado.
Recomendo examinar cada um dos exemplos, brincar com eles e explicar em sua cabeça por que eles fazem todo o sentido. Pode ser útil instalar uma extensão do navegador para ajudar a verificar sua intuição e solidificar sua compreensão.
Isso é tudo que tenho para você hoje. Como sempre, obrigado pela leitura!