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:
#elem1 {
z-index: 2;
}
#elem2 {
z-index: 1;
}
Resultado da execução do código:
Repita a página seguindo este modelo:
Repita a página seguindo este modelo: