Vai empilhar seus elementos mas seu z-index de mais de 8000 com !important não está funcionando? Isso já te fez dizer "puta merda eu devia ter estudado back-end? Vem comigo e vamos perder o trauma de z-index.
Stacking context
No post anterior vimos que a propriedade position coloca os elementos do pai posicionado em um containing block que dita como a movimentação dele e dos seus elementos vão ser calculadas e à partir de qual referência será feito o cálculo.
Quando queremos movimentar um elemento no eixo z, ou seja na direção pra fora ou pra dentro da tela, quebrando a quarta parede, precisamos de um containing block para que todos elementos dentro do pai sejam posicionados dentro do mesmo contexto no eixo z.
Ao aplicar o z-index a um containing block vc cria um stacking context, que avisa pro navegador que você vai empilhar elementos no eixo z. Se vc definir o z-index de 1 pro elemento pai, todos os filhos no stacking context dele vão ter o mesmo z-index, é de morder as costas.
Então primeira regra:
Sempre posicione o elemento que tu vai aplicar o z-index.
Algumas propriedades além de position criam stacking-context, elas são:
- filter
- opacity
- transform
- will-change
Opacity e filter criam stacking-context pq modificam a nível de pixel elementos que podem ou não estar empilhados. Já transform e will-change transformam o elemento em uma composit layer.
Uma composit layer é o elemento avisando que ele precisa de aceleração de GPU pra ser renderizado pois vai receber animações pesadas. Como animações ocorrem em todos os eixos, o stacking context é habilitado.
Então se o seu z-index tá dando pau, veja duas coisas:
O elemento tem um position?
Esse elemento é filho de um elemento que tem z-index?
O browser computa o valor de z-index de até 2.147.483.647 (é sério), mas se você não respeitar essas duas regrinhas, NÃO ADIANTA.
O stacking natural do HTML
O HTML tem seu próprio "z-index", se você colocar 3 div dentro do mesmo grid-area por exemplo, elas vão empilhar na ordem que está escrito no seu HTML, do ultimo pro primeiro.
Pro "z-index" natural dos elementos HTML os últimos serão os primeiros.
<body>
<section>
<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
</section>
</body>
A tag <html> possui o próprio z-index (que é 0), então você não consegue posicionar elementos atrás dela, mas você consegue posicionar esses elementos atrás do <body>, o que pode ser útil para esconder alguns elementos.
Outro fato é que o elemento <select> sempre vai ficar no topo, independente do z-index que tu use.
Como debugar z-index?
- Usando o painel de layers do devTools. Abre o devTools, aperta os três pontinhos e escolhe Layers.
Já no painel de layers, no canto superior esquerdo tem a ferramenta de rotacionar que permite que você veja seus elementos no eixo-z usando perspectiva
- Instalem a extensão VizBug no Chrome, além de você conseguir editar o site visualmente, ela tem um plugin que coloca uma borda e o valor em todos os elementos com z-index da sua página. Só clicar na lupinha e digitar
/zindex
Obs: O youtube usa z-index PRA CARALHO
Tenham paciência de inspecionar as coisas antes de lançar z-index de 999, usem com cuidado, sempre em ordem numérica do 1 em diante (ou -1 em diante, o limite é o ).
Se isso aqui te ajudou n esquece de compartilhar, deixem suas duvidas nos comentários ou chame lá no @lixeletto, observações e depoimentos de z-index. Qual foi o maior z-index que tu já viu? Conta aí nos comentários.
Top comments (0)