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 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.

Resumen

Las capas se pueden usar en muchas situaciones diferentes. Por ejemplo, intenta usar la propiedad z-index para crear efectos en los títulos en lugar de crear gráficos. Por un lado, es más rápido cargar texto, y por otro, proporciona una clasificación potencialmente mejor en los motores de búsqueda.