4 minutos de leitura
Autor(a)
Como uma boa curiosa, gosto de ler, ver, ouvir e experimentar. Uma entusiasta da web acessível a todos. Hoje, faço parte da Escola de UX e Design na Alura.
Fique por dentro de conteúdos, insights e oportunidades do universo tech. Receba novidades e lançamentos direto no seu e-mail.
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.
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 ()on .
Avalie este artigo
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:
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.
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.
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."
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!
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!
Atomic design no front-end: escalabilidade e modularidade
Ler mais
Formulário com form validation do HTML5
Ler mais
i18n no Next.js: como criar sites multilíngues
Ler mais