Como controlar a ordem de empilhamento de elementos com 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...
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...
O z-index aceita valores negativos. Um elemento com z-index: -1 fica atrás do fluxo normal da página.
Carregando...
z-index aparece com frequência em situações como:
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.