z-index no CSS

A propriedade z-index controla a ordem de empilhamento dos elementos.

z-index: 1;

→ Elementos com valor maior ficam na frente.
→ Valores menores ficam atrás.
→ Muito usado quando elementos se sobrepõem.

.caixa1{ 

 position: absolute; 

 z-index: 1; 

} 

.caixa2{ 

position: absolute; 

z-index: 5; 

}

A .caixa2 aparece na frente da .caixa1.

Importante:

• Normalmente funciona em elementos com position diferente de static.
• Pense como andares: quanto maior o número, mais alto fica.

Uso comum:

• Menus sobre conteúdo
• Pop-ups e modais
• Botões flutuantes
•  Camadas de imagens