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!