Z-index: o que é, como funciona e como utilizar para posicionar elementos

Neste artigo, vamos desmistificar a propriedade `z-index` do CSS e mostrar como utilizá-la na prática. Apesar de parecer complicada inicialmente, essa propriedade serve para definir a ordem de sobreposição dos elementos na tela, usando um valor inteiro." 

Quando pensamos em posicionamento de elementos, a primeira coisa que vem à nossa cabeça são os eixos X e Y - o eixo X é referente à coordenada horizontal e o eixo Y referente a coordenada vertical.

Já o eixo Z está relacionado à profundidade em CSS. O z-index é a propriedade que manipula essa camada, definindo se um elemento estará mais afastado (atrás) ou mais próximo (na frente) na tela. 

Para que o z-index funcione corretamente no CSS, o elemento precisa ter a propriedade `position` definida como `relative`, `absolute`, `fixed` ou `sticky`. O valor padrão `static` não permite aplicar o z-index. 

Como funciona a sobreposição de elementos sem usar z-index no CSS 

Quando a propriedade `z-index` não é definida, os elementos assumem o valor padrão `z-index: auto`. 

Assim, o posicionamento ocorre de forma sequencial: elementos com menor valor de `z-index` ficam mais ao fundo, enquanto valores maiores trazem o elemento para frente 

Assim, como está demonstrado da seguinte forma: 

See the Pen z-index by Laís (@laisc)

on CodePen. 

Como usar z-index no CSS para controlar a ordem dos elementos 

E se desejarmos que o quadrado rosa (que aparece ao centro) fique à frente dos demais? Basta atribuir ao quadrado rosa um valor de `z-index: 1`. Como os outros elementos possuem `z-index` automático (`auto`), o quadrado rosa terá prioridade na sobreposição, ficando à frente, como demonstrado abaixo: 

See the Pen z-index:1 by Laís (@laisc)

on CodePen. 

No código acima, o quadrado rosa fica mais próximo da superfície porque possui o maior valor de `z-index` entre os elementos.

Já os demais quadrados, sem valor definido para z-index, recebem o valor `auto` por padrão. 

z-index negativo: como posicionar elementos atrás no CSS 

O `z-index` também aceita valores negativos, posicionando um elemento ainda mais ao fundo em relação aos outros. Isso é útil quando queremos que determinado elemento fique atrás de todos os demais. Veja o exemplo: 

See the Pen z-index by Vanessa Me Tonini (@vanessametonini)

on CodePen. 

O quadrado de cor rosa recebe um valor negativo para `z-index`, -1, assim, jogando esse elemento para uma maior profundidade na tela, ou seja, é o último desses elementos na sequência.

Como os outros quadrados não estão definidos com nenhum valor para `z-index`, por padrão, eles terão valor `auto` e por isso, tem maior prioridade a um valor negativo.

Apesar da possibilidade de usar valores negativos z-index, evita-se ao máximo porque os cálculos podem começar a ficar complicados para quem está desenvolvendo. O ideal é utilizar valores positivos e sequenciais para z-index. 

Exemplo prático: z-index em casos reais no CS 

Um exemplo prático de uso ocorre em sites como o encycolorpedia, que utiliza `z-index: 10` em um menu lateral. Assim, ao ser acionado, o menu aparece à frente dos demais elementos da página, que possuem valores menores." 

Agora é com você! 

Utilize o código compartilhado aqui para testar outros valores para `z-index`, brincar com as diversas possibilidades dessa propriedade e, estudar com a nossa Formação de HTML e CSS e com os cursos de Front-end! 

Como aprender mais sobre o tema?

Dominar propriedades como o z-index é essencial para criar interfaces modernas, organizadas e com uma boa experiência visual.

Afinal, menus flutuantes, modais, overlays, sidebars e diversos componentes presentes em aplicações atuais dependem diretamente do controle correto de posicionamento e sobreposição de elementos no CSS.

Entender como o eixo Z funciona ajuda não apenas a evitar conflitos visuais, mas também a construir layouts mais profissionais e previsíveis no front-end.

Se você quer aprofundar esses conceitos na prática, vale conferir o curso CSS: posicionando elementos com Flexbox e CSS Grid, da Alura. Nele, você aprende sobre posicionamento de elementos, camadas, organização de layouts responsivos e diversas técnicas fundamentais para desenvolver interfaces modernas utilizando HTML e CSS.

Bons estudos e até a próxima leitura!