Uno de los desafíos al usar el posicionamiento CSS para el diseño de páginas web es que algunos de sus elementos pueden superponerse a otros. Esto funciona bien si desea que el último elemento del HTML esté en la parte superior, pero si no lo hace o si desea tener elementos que actualmente no se superpongan con otros, porque el diseño requiere este aspecto "en capas". ? Para cambiar la forma en que se superponen los elementos, debe 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, entonces es probable que haya visto algo como el índice z en acción. En estos programas, puede resaltar los objetos que ha dibujado y elegir una opción para "Enviar al dorso" o "Poner al frente" ciertos elementos de su documento. En Photoshop, no tiene estas funciones, pero sí tiene el panel "Capa" del programa y puede organizar dónde cae un elemento en el lienzo al reorganizar estas capas. En ambos ejemplos, esencialmente está configurando el índice z de esos objetos.
¿Qué es el índice Z?
Cuando utiliza el posicionamiento CSS para colocar elementos en la página, debe pensar en tres dimensiones. Hay dos dimensiones estándar: izquierda / derecha y arriba / abajo. El índice de izquierda a derecha se conoce como el índice x, mientras que el índice de arriba a abajo es el índice y. Así es como posicionaría los elementos horizontal o verticalmente, utilizando estos dos índices.
Cuando se trata de diseño web, también existe el orden de apilamiento de la página. Cada elemento de la página se puede colocar encima o debajo de cualquier otro elemento. La propiedad z-index determina dónde está en la pila cada elemento. Si x-index y y-index son las líneas horizontales y verticales, entonces z-index es la profundidad de la página, esencialmente la tercera dimensión.
Piense en los elementos de una página web como trozos de papel y en la página web como un collage. El lugar donde se coloque el papel se determina por la posición, y la parte del mismo que está cubierta por los otros elementos es el índice z.
- El índice z es un número, ya sea positivo (por ejemplo, 100) o negativo (por ejemplo, -100).
- El índice z predeterminado es 0.
El elemento con el índice z más alto está en la parte superior, seguido del siguiente más alto y así sucesivamente hasta el índice z más bajo. Si dos elementos tienen el mismo valor de índice z (o no está definido, lo que significa que usa el valor predeterminado de 0), el navegador los colocará en el orden en que aparecen en el HTML.
Cómo usar el índice Z
Dé a cada elemento que desee en su pila un valor de índice z diferente. Por ejemplo, si tienes cinco elementos diferentes:
- elemento A - índice z de -25
- elemento B - índice z de 82
- elemento C - índice z no establecido
- elemento D - índice z de 10
- elemento E - índice z de -3
Se apilarán 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 sus elementos. De esa manera, si agrega más elementos a la página más adelante, tendrá espacio para colocarlos en capas sin tener que ajustar los valores del índice z de todos los demás elementos. Por ejemplo:
- 100 para su elemento superior
- 0 para tu elemento medio
- -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 use efectivamente la propiedad z-index, debe ser un elemento de nivel de bloque o usar una visualización de "bloque" o "bloque en línea" en su archivo CSS.
