CAPAS (z-index)

CSS funciona sobre tres dimensiones: altura, anchura y profundidad. En las lecciones anteriores hemos examinado las dos primeras dimensiones. En esta lección, aprenderemos cómo hacer que diferentes elementos se conviertan en capas. En pocas palabras, esto hace referencia al orden en que los elementos se superponen unos con respecto a otros.

Para tal propósito, se puede asignar a cada elemento un número por medio de la propiedad z-index. El sistema consiste en que el elemento con un número mayor se superpone al elemento con un número menor.

Supongamos que estamos jugando al poquer y tenemos una escalera de color. La mano se puede presentar de tal manera que cada carta tiene un número asignado por medio de z-index:

En este caso, los números son consecutivos (yendo del 1 al 5), aunque se puede lograr el mismo resultado usando cinco numeros diferentes. Lo importante es la secuencia cronológica de los números (el orden).

El código del ejemplo de las cartas quedaría así:

 
 #diez_de_diamantes {
  position: absolute;
  left: 100px;
  top: 100px;
  z-index: 1;
 }

 #sota_de_diamantes {
  position: absolute;
  left: 115px;
  top: 115px;
  z-index: 2;
 }

 #reina_de_diamantes {
  position: absolute;
  left: 130px;
  top: 130px;
  z-index: 3;
 }

 #rey_de_diamantes {
  position: absolute;
  left: 145px;
  top: 145px;
  z-index: 4;
 }

 #as_de_diamantes {
  position: absolute;
  left: 160px;
  top: 160px;
  z-index: 5;
 }
 

El método es relativamente sencillo pero las posibilidades que ofrece son múltiples. Es posible colocar imágenes sobre el texto, texto sobre imágenes, etc.

TOMADO DE= http://es.html.net/tutorials/css/lesson15.php