DEV Community

loading...
Cover image for Não apanhe do layout - Z-index

Não apanhe do layout - Z-index

lixeletto profile image Camilo Micheletto ・3 min read

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.

Quadrado com 4 elementos, todos eles com o mesmo z-index do pai

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:

  1. O elemento tem um position?

  2. 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>
Enter fullscreen mode Exit fullscreen mode

Quadrados sobrepostos seguindo a ordem deles no HTML

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?

  1. Usando o painel de layers do devTools. Abre o devTools, aperta os três pontinhos e escolhe Layers.

Localização do painel de layers no devTools

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

Página sendo visualizada em perspectiva pelo painel de layers

  1. 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
Youtube na marotagem usando z-index de 9999 pras coisa tudo

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.

Discussion (0)

pic
Editor guide