Não apanhe do layout - Z-index
Tags: css, beginners, layout
Published: 2020-09-22 19:30:45

_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](https://dev-to-uploads.s3.amazonaws.com/i/56dy3lkfr340ob2z2f0p.png)

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.

```html
<body>
  <section>
      <div class="block">1</div>
      <div class="block">2</div>
      <div class="block">3</div>
  </section>
</body>
```

![Quadrados sobrepostos seguindo a ordem deles no HTML](https://dev-to-uploads.s3.amazonaws.com/i/ffo2kb5f8mb5g5t8l1za.png)

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](https://dev-to-uploads.s3.amazonaws.com/i/6x3fzzhx2qr99t4ifcr5.png)

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](https://dev-to-uploads.s3.amazonaws.com/i/33n6n3z30es4o1h509je.jpg)

2. 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](https://dev-to-uploads.s3.amazonaws.com/i/kbtgey81x1jvz9etoxn3.jpg)

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 <html>).

-------------

Se isso aqui te ajudou n esquece de compartilhar, deixem suas duvidas nos comentários ou chame lá no [@lixeletto](https://twitter.com/lixeletto), observações e depoimentos de z-index. Qual foi o maior z-index que tu já viu? Conta aí nos comentários.