tecnoship

Identificarse | Registrarse | FAQ

Inicio
Tutoriales
Foros
Acerca de
Principio del formulario

Final del formulario
Home » Tutoriales » CSS » Lección 15: Capa sobre capa con la propiedadz-index (Capas)
Lección 15: Capa sobre capa con z-index (Capas)
CSS funciona sobre tres dimensiones: altura, anchura y profundidad. En las lecciones anteriores hemos examinado las dos primerasdimensiones. 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 aotros.
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 unnú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 estecaso, 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;
}


Ver ejemplo
El método es relativamente sencillo perolas posibilidades que ofrece son múltiples. Es posible colocar imágenes sobre el texto, texto sobre imágenes, etc.
Resumen
Las capas se pueden usar en muchas situaciones diferentes. Por ejemplo,...