Uno de los retos al utilizar el posicionamiento CSS para el diseño de páginas web es que algunos de sus elementos pueden solaparse con otros. Esto funciona bien si quieres que el último elemento en el HTML esté en la parte superior, pero ¿qué pasa si no lo haces o si quieres tener elementos que actualmente no se superponen a otros para hacerlo porque el diseño requiere este aspecto de «capas»? Para cambiar la forma en que los elementos se superponen, es necesario utilizar la propiedad de CSS.
Si ha utilizado herramientas gráficas en Word y PowerPoint o un editor de imágenes más robusto como Adobe Photoshop, lo más probable es que haya visto algo como un índice z en acción. En estos programas, puede resaltar el objeto u objetos que ha dibujado y elegir la opción «Enviar al fondo» o «Traer al frente» de ciertos elementos del documento. En Photoshop, usted no tiene estas funciones, pero sí tiene el panel «Layer» del programa y puede organizar donde cae un elemento en el lienzo reorganizando estas capas. En ambos ejemplos, está configurando esencialmente el índice z de esos objetos.
¿Qué es Z-Index?
Cuando se utiliza el posicionamiento CSS para posicionar elementos en la página, es necesario pensar en tres dimensiones. Hay dos dimensiones estándar: izquierda/derecha y arriba/abajo. El índice de izquierda a derecha se conoce como índice x, mientras que el de arriba a abajo es el índice y. Así es como se posicionan los elementos horizontal o verticalmente, utilizando estos dos índices.
Cuando se trata de diseño web, también está el orden de apilamiento de la página. Cada elemento de la página puede estar por encima o por debajo de cualquier otro elemento. La propiedad z-index determina en qué parte de la pila se encuentra cada elemento. Si el índice x y el índice y son las líneas horizontales y verticales, entonces el índice z es la profundidad de la página, esencialmente la tercera dimensión.
Piense en los elementos de una página web como pedazos de papel y en la propia página web como un collage. El lugar donde se coloca el papel se determina por la posición, y cuánto de él está cubierto por los otros elementos es el índice z.
- El índice z es un número, ya sea positivo (p. ej. 100) o negativo (p. ej. -100).
- El índice z predeterminado es 0.
El elemento con el índice Z más alto se encuentra en la parte superior, seguido por el siguiente más alto y así sucesivamente hasta el índice Z más bajo. Si dos elementos tienen el mismo valor de z-index (o no está definido, es decir, el valor por defecto es 0) el navegador los colocará en el orden en que aparecen en el HTML.
Cómo usar Z-Index
Dé a cada elemento que desee de su pila un valor de índice Z diferente. Por ejemplo, si tiene cinco elementos diferentes:
- elemento A – índice z de -25
- elemento B – índice z de 82
- elemento C – z-index no definido
- elemento D – índice z de 10
- elemento E – índice z de -3
Se apilan en el siguiente orden:
- elemento B
- elemento D
- elemento C
- elemento E
- elemento A
Se recomienda utilizar valores de índice z muy diferentes para apilar los elementos. De esta manera, si agrega más elementos a la página más tarde, tendrá espacio para superponerlos sin tener que ajustar los valores del índice z de todos los demás elementos. Por ejemplo:
- 100 para su elemento más importante
- 0 para su elemento central
- -100 para su elemento inferior
También puede dar a dos elementos el mismo valor de índice z. Si estos elementos están apilados, se mostrarán en el orden en que están escritos en el HTML, con el último elemento en la parte superior.
Una nota: para que un elemento pueda utilizar eficazmente la propiedad z-index, debe ser un elemento a nivel de bloque o utilizar una visualización de «bloque» o «bloque en línea» en su archivo CSS.
