Controle da sobreposição de elementos no eixo Z em CSS

A ordem de sobreposição dos elementos pode ser controlada usando a propriedade z-index, que aceita como valor números inteiros positivos ou negativos, ou zero. A propriedade funciona apenas para elementos cujo valor de position é definido como absolute, fixed ou relative.

Ao usar esta propriedade, a regra de sobreposição dos elementos é a seguinte: ficará mais acima aquele elemento cujo valor de z-index for maior.

Vamos mudar a ordem de sobreposição dos elementos do exemplo anterior. Para isso, vamos definir o z-index do primeiro elemento como maior do que o do segundo, por exemplo, assim:

css#elem1 {
  z-index: 2;
}
#elem2 {
  z-index: 1;
}

Resultado da execução do código: