CSS: Superposición de cajas

Además de posicionar una caja de forma horizontal y vertical, CSS permite controlar la posición tridimensional de las cajas posicionadas, determinando el orden de superposición de éstas. De esta forma, es posible indicar las cajas que se muestran delante o detrás de otras cajas. Es útil cuando se producen solapamientos.

Utilizando la propiedad z-index es posible crear páginas complejas con varios niveles o capas.

Cómo funciona la propiedad z-index

El valor más común de la propiedad z-index es un número entero. Aunque la especificación oficial permite los números negativos, en general se considera el número 0 como el nivel más bajo. Por lo tanto, cuanto más alto sea el valor más "cerca" del usuario se mostrará la capa (una caja con valor z-index:10 se mostrará por encima que otra con valor z-index:9).

Sirva la siguiente imagen como ejemplo:

En este caso la caja el valor z-index de caja3 será mayor que el de la caja2, que a su vez será mayor que el de la caja1.

z-index caja1 < z-index caja2 < z-index caja3

IMPORTANTE:
La propiedad z-index sólo tiene efecto en los elementos posicionados, por lo que es obligatorio que la propiedad z-index vaya acompañada de la propiedad position.

Si debes posicionar un elemento pero no quieres moverlo de su posición original ni afectar al resto de elementos de la página, puedes utilizar el posicionamiento relativo (position: relative).

PRACTICA: Dado el siguiente código HTML, aplicar las reglas necesarias para posicionar las cajas de tal forma que la caja 2 quede por encima de caja 1 pero por debajo de caja 3 :

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Problema</title>
<style type="text/css">
#caja1,#caja2,#caja3 {
background-color:#f99;
font-size:1.3em;
margin-bottom:10px;
width:200px;
height:200px;

}
#caja2 {
position:absolute;
background-color:#ff9;
left:90px;
top:60px;
}
</style>

</head>
<body>
<div id="caja1">
<p>CAJA 1</p>
</div>
<div id="caja2">
<p>CAJA 2</p>
</div>
<div id="caja3">
<p>CAJA 3</p>
</div>
</body>
</html>


REFERENCIA

CSS

SELECTORES

COLORES

BOX MODEL

FONDOS

POSICIONAMIENTO

VISUALIZACIÓN

TIPOGRAFÍA

TEXTO

ENLACES

IMÁGENES

LISTAS

TABLAS

FORMULARIOS

LAYOUT

Ejercicios

ANEXO