CSS3: Superponiendo capas
Si hablamos de maquetar o personalizar una web siguiendo unos estilos predeterminados solemos recurrir a las hojas de estilo en cascada que nos proporcionan una gran variedad de propiedades para darle un estilo único y diferenciará nuestra web de las demás. La última versión, CSS3, añade nuevos atributos pero mantiene o modifica los que se venían utilizando en las versiones anteriores, como el CSS2. Es en esta versión en la que se añade la propiedad de la cual os voy a hablar hoy, el «z-index«, permite superponer una capa sobre otra.
Aportando profundidad con z-index
Seguramente te estarás preguntando cómo funciona esta propiedad que hace referencia a la posición que ocupan unos elementos respecto a otros. Pues la respuesta es muy sencilla.
La propiedad z-index indica el orden de un elemento y sus descendientes. Cuando se quiere superponer varios elementos, el elemento con un número mayor se superpone al elemento con un número menor.
Supongamos que tenemos un juego de cartas que queremos apilar ordenadamente. El apilamiento se puede hacer de tal manera que cada carta tiene un número asignado por medio de z-index.
Código:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Ejemplo de z-index</title>
<style>
.carta {
width: 4%;
margin-left: 1%;
float: left;
}
</style>
</head>
<body>
<div id="uno" class="carta">
<img src="imagenes/1p.gif">
</div>
<div id="dos" class="carta">
<img src="imagenes/2p.gif">
</div>
<div id="tres" class="carta">
<img src="imagenes/3p.gif">
</div>
<div id="cuatro" class="carta">
<img src="imagenes/4p.gif">
</div>
<div id="cinco" class="carta">
<img src="imagenes/5p.gif">
</div>
</body>
</html>
Lo que aquí se muestra sería algo como esto:
En este código se puede ver que son imágenes dentro de DIVs creados para mostrar un antes y después de aplicar la propiedad z-index. Como siempre decimos, lo recomendable no es poner el texto del estilo en la cabecera de la página, pero para mostrarlo en un tutorial es lo más óptimo.
Procedamos ahora a aplicar ahora la propiedad que nos atañe.
Código:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Ejemplo de z-index</title>
<style>
.carta {
width: 4%;
margin-left: 1%;
float: left;
}
#uno {
position: absolute;
left: 215px;
top: 50px;
z-index: 1;
}
#dos {
position: absolute;
left: 230px;
top: 65px;
z-index: 2;
}
#tres {
position: absolute;
left: 245px;
top: 80px;
z-index: 3;
}
#cuatro {
position: absolute;
left: 260px;
top: 95px;
z-index: 4;
}
#cinco {
position: absolute;
left: 275px;
top: 110px;
z-index: 5;
}
</style>
</head>
<body>
<div id="uno" class="carta">
<img src="imagenes/1p.gif">
</div>
<div id="dos" class="carta">
<img src="imagenes/2p.gif">
</div>
<div id="tres" class="carta">
<img src="imagenes/3p.gif">
</div>
<div id="cuatro" class="carta">
<img src="imagenes/4p.gif">
</div>
<div id="cinco" class="carta">
<img src="imagenes/5p.gif">
</div>
</body>
</html>
Después de aplicar la propiedad nuestra baraja quedaría más o menos así:
Los números de este ejemplo son consecutivos (del 1 al 5), pero se puede lograr el mismo resultado usando numeros diferentes. Lo importante es el orden que siguen estos números, cada uno con referencia al anterior.
Si quisiéramos hacer el orden al revés sería tan sencillo como poner el orden más alto de primero y tendríamos algo así:
Datos adicionales
El método es relativamente sencillo pero ofrece muchísimas posibilidades a realizar. Es posible colocar imágenes sobre el texto, texto sobre imágenes, etc.
Es necesario aclarar que se utiliza una posición absoluta porque de esta manera el elemento no ocupa espacio en el documento, lo que significa que deja un espacio vacio para que pueda haber otro elemento posicionado.
De igual manera las posiciones de top y left son meramente orientativas. Cada uno coloca los píxels que considere oportunos en cada caso.
Por ejemplo vamos a colocar la carta número 4 por encima del 3 y el 5 por encima del 4
#cuatro {
position: absolute;
left: 260px;
top: 80px;
z-index: 4;
}
#cinco {
position: absolute;
left: 260px;
top: 110px;
z-index: 5;
}
Tendríamos una cosa así:
Compatibilidad con navegadores
Si los navegadores ya se actualizaron a la versión CSS3, esta propiedad, que fue incluída en la versión CSS2 no deberían tener ningún problema a la hora de visualizarse en los navegadores.
Espero que os haya servido de ayuda. Aunque es muy básico, a veces, lo sencillo es lo más eficaz. Un saludo y hasta el próximo tutorial.