LibrosWeb.es

Como se sabe, los navegadores crean automáticamente una caja para cada elemento de la página HTML. Aunque el navegador coloca cada caja en su sitio siguiendo un algoritmo muy complejo, el estándar de CSS incluye las propiedades position, float, top, right, bottom y left para modificar esa posición inicial.

La mayoría de páginas sólo modifican la posición horizontal o vertical de las cajas, pero CSS también permite modificar su posición en una tercera dimensión. En efecto, las cajas también disponen de una posición en un eje llamado z y que permite colocar las cajas por delante o por detrás de otras cajas de la página.

La propiedad que controla la posición tridimensional de una caja se denomina z-index y sólo tiene efecto sobre los elementos posicionados, es decir, aquellos sobre los que se ha establecido la propiedad position o la propiedad float. Por su propia definición, z-index sólo suele ser útil cuando se producen solapamientos entre las cajas.

Si no se utiliza la propiedad z-index, los navegadores colocan las cajas según el orden en el que se encuentran en el código HTML. Este orden es importante cuando se producen solapamientos entre cajas, como en el siguiente ejemplo:

Las tres cajas del ejemplo anterior están posicionadas de tal forma que se producen solapamientos entre ellas. La caja 3 se ve por encima de las otras dos porque es la última en el código HTML de la página. A su vez, la caja 2 se ve por delante de la caja 1 porque su código HTML aparece después.

La propiedad z-index permite modificar fácilmente este comportamiento de forma que se pueda colocar cualquier caja por delante o por detrás de cualquier otra caja de la página. Para ello, solamente hay que indicar un número entero positivo o negativo como valor de z-index, que se interpreta como el nivel o capa en la que se encuentra la caja.

Inicialmente todas las cajas se encuentran en el nivel o capa correspondiente al número 0. Cuanto más grande sea el valor de z-index, más cerca del punto de vista del usuario se encuentra la caja y por tanto, menos cajas se encuentran por encima suyo. Igualmente, cuanto menor sea el valor de z-index, más alejada del punto de vista del usuario se encuentra la caja y más cajas se solaparán por encima.

Utilizando el ejemplo anterior, si se quiere mostrar la caja 1 por encima de la caja 2, tan sólo es necesario utilizar la siguiente regla CSS:

#caja1 { z-index: 1; }

A continuación se muestra el resultado de añadir la regla CSS anterior:

Como ahora la caja 1 tiene establecida la propiedad z-index: 1, esta caja se encuentra en el nivel o capa 1, que se muestra por encima de la capa 0 en la que se encuentran el resto de cajas de la página. Los navegadores crean automáticamente las capas cuando se indica un valor numérico en la propiedad z-index.

Si en el ejemplo anterior se quiere colocar la caja 2 por encima de las otras dos, se debe emplear la propiedad z-index con cualquier valor numérico superior a 1, como por ejemplo en número 2. Como la caja 3 no ha modificado su propiedad z-index, se encuentra en la capa 0 y como la caja 1 se encuentra en la capa 1, utilizar cualquier número superior a 1 garantiza que la caja 2 se verá por delante de las otras:

Si ahora se quiere volver a mostrar la caja 1 por delante de la caja 2, se modifica el valor de su propiedad z-index para que tenga un valor superior al de la caja 2. Por tanto, se debe utilizar cualquier número entero mayor que 2:

El resultado final del ejemplo anterior es justamente el contrario del primer ejemplo, ya que la caja 1 se muestra por encima de todas las demás y la caja 3 se encuentra por debajo de las otras dos cajas.

Aunque el estándar no lo indica explícitamente, muchos sitios web utilizan el valor 999 como valor máximo de la propiedad z-index. En cuanto a los números negativos, normalmente sólo se utiliza el valor -1 para colocar cajas por detrás de la capa base de la página, pero se puede utilizar cualquier otro número entero negativo.

La propiedad z-index funciona para cualquier elemento posicionado, lo que no implica que la caja tenga que desplazarse en los ejes x e y. De hecho, es común modificar la posición tridimiensional de una caja sin moverla de su posición original. Para ello, sólo es necesario establecer la propiedad position: relative, que posiciona la caja pero no la desplaza:

/* Si el elemento no está posicionado, se ignora el valor de z-index */
selector {
  z-index: 2;
}
 
/* Aunque no se ha desplazado de su posición original, el siguiente elemento está posicionado, por lo que se le aplica la propiedad z-index */
selector {
  position: relative;
  z-index: 2;
}

A pesar de lo sencillo que es utilizar la propiedad z-index, su funcionamiento en el navegador Internet Explorer frustró el trabajo de muchos diseñadores web. El problema reside en que Internet Explorer 6 y todas sus versiones anteriores ignoran la propiedad z-index para los elementos <select> de los formularios, impidiendo que otras cajas puedan taparlos y provocando de esta forma efectos visuales extraños.

Por otra parte, si el diseño de una página está compuesto por muchas capas, es recomendable utilizar valores no consecutivos en la propiedad z-index. De esta forma, asignando por ejemplo un valor 10 para una capa y un valor 20 para otra capa, se pueden utilizar todos los valores intermedios (11, 12, ..., 19 ) para las posibles capas que se quieran intercalar entre esas dos capas.

Por último, recuerda que la mayoría de diseñadores web denomina erróneamente "capas" a las cajas creadas con elementos <div>. En realidad, los <div> no crean capas sino divisiones, de ahí su nombre. La única forma de crear capas en las páginas HTML es mediante el uso de la propiedad z-index.