Learning Hub Logo
CSS
  • Introdução ao CSS
  • Sintaxe do CSS
  • Seletores CSS
  • Comentários no CSS
  • Cores no CSS
  • Background no CSS
  • Bordas no CSS
  • Margens no CSS
  • Padding no CSS
  • Height e Width no CSS
  • Texto no CSS
  • Fontes no CSS
  • Ícones no CSS
  • Box Model
  • Display no CSS
  • Position no CSS
  • Z-index no CSS
  • Overflow no CSS
  • Float e Clear no CSS
  • Flexbox
  • Grid
  • Media Queries
  • Opacity e Transparência
  • Sombras no CSS
  • Gradientes no CSS
  • Transições no CSS
  • Animações no CSS
  • Variáveis CSS

Sobre Diego Pinho

Professor especialista em tecnologia com mais de 10 anos de experiência. Autor de livros técnicos e criador de cursos que já impactaram milhares de estudantes.

Visite meu site principal →

Serviços

  • Área do Aluno
  • Solicite um orçamento
  • Trabalhe Conosco

Redes Sociais

  • Youtube
  • TikTok
  • Instagram
  • LinkedIn

Links

  • Site Institucional
  • Nosso Blog
  • Cursos Online
  • Livros Publicados

Professor Diego Pinho

Educação, Tecnologia e IA © 2026

Discord
CSSZ-index no CSS
1 min de leitura

Z-index no CSS

Como controlar a ordem de empilhamento de elementos com z-index

Para que serve o z-index?

Quando elementos se sobrepõem na página, o z-index define qual deles aparece na frente. Pense nele como a profundidade do elemento no eixo Z, que aponta em direção a você.

Quanto maior o valor, mais na frente o elemento aparece na tela.

Carregando...

z-index só funciona com position

O z-index não tem efeito em elementos com position: static, que é o valor padrão. O elemento precisa ter position: relative, absolute, fixed ou sticky para que o z-index funcione.

Carregando...

Valores negativos

O z-index aceita valores negativos. Um elemento com z-index: -1 fica atrás do fluxo normal da página.

Carregando...

Uso no dia a dia

z-index aparece com frequência em situações como:

  • menus dropdown que precisam ficar acima do conteúdo;
  • modais e overlays que cobrem a página inteira;
  • tooltips que aparecem sobre outros elementos;
  • cabeçalhos fixos que precisam ficar acima do conteúdo que passa por baixo.
Carregando...

Não existe um valor máximo definido, mas é boa prática usar valores com margem entre eles (10, 100, 1000) para facilitar inserir elementos intermediários no futuro sem precisar renumerar tudo.

AnteriorPosition no CSSPróximo Overflow no CSS