CSS usa o espaço tri-dimensional - altura, largura e profundidade. Definimos para cada elemento um número índice (z-index).
O comportamento é que elementos com número índice maior se sobrepõem àqueles com menor número.

Vamos supor um royal flush no jogo de poker. As cartas podem ser apresentadas como se cada uma delas tivesse um z-index:

Css z-index

Os números índice estão numa sequência direta (de 1-5), contudo o mesmo resultado poderia ser obtido com uso de 5 diferentes números, não em seqüência. O que conta é a cronologia dos números (a ordem).

O código para a ilustração das cartas é mostrado a seguir:

#ten_of_diamonds {
   position: absolute;
   left: 100px;
   bottom: 100px;
   z-index: 1;
}

#jack_of_diamonds {
   position: absolute;
   left: 115px;
   bottom: 115px;
   z-index: 2;
}

#queen_of_diamonds {
   position: absolute;
   left: 130px;
   bottom: 130px;
   z-index: 3;
}

#king_of_diamonds {
   position: absolute;
   left: 145px;
   bottom: 145px;
   z-index: 4;
}

#ace_of_diamonds {
   position: absolute;
   left: 160px;
   bottom: 160px;
   z-index: 5;
}

Desentupimentos Artigos Hotelaria