La mayoría de las propiedades CSS son fáciles de usar. A menudo, cuando utiliza propiedades CSS en elementos de un lenguaje de marcado, los resultados aparecen inmediatamente al actualizar la página. Otras propiedades de CSS son más complejas y sólo funcionarán en determinadas circunstancias.
El atributo índice Z pertenece al último grupo mencionado anteriormente. Sin duda, el índice Z causa confusión (compatibilidad) y frustración (psicología del desarrollador) con más frecuencia que cualquier otro atributo. Pero lo curioso es que, una vez que realmente comprenda el índice Z, descubrirá que es una propiedad muy fácil de usar y que le brindará una poderosa ayuda para resolver muchos desafíos de diseño.
En este artículo, explicaremos exactamente qué es el índice Z, por qué no se comprende tan bien y discutiremos algunas cuestiones prácticas relacionadas con su uso. También describiremos algunas de las diferencias entre navegadores que encontrará, que son problemas únicos que existen en las versiones existentes de IE y Firefox. Esta perspectiva integral sobre el atributo de índice Z brindará a los desarrolladores una buena base de confianza y una ayuda poderosa al utilizar el atributo de índice Z.
¿Qué es esto?
El atributo índice Z determina el nivel de apilamiento de un elemento HTML. El nivel de apilamiento de un elemento es relativo a la posición del elemento en el eje Z (a diferencia del eje X o el eje Y). Un valor de índice Z más alto significa que el elemento estará más cerca de la parte superior en el orden de apilamiento. Esta secuencia de capas se presenta a lo largo de ejes de hilo verticales.
Para dar una idea más clara de cómo funciona el índice Z, la imagen de arriba exagera el posicionamiento visual de los elementos apilados.
secuencia de capas naturales
En una página HTML, el orden de apilamiento natural (es decir, el orden de los elementos en el eje Z) está determinado por muchos factores. La siguiente es una lista que muestra los elementos de la lista en un contexto de apilamiento (aún no se ha encontrado una traducción al chino adecuada, debería referirse al entorno de apilamiento donde se encuentran los elementos apilados en este contexto de apilamiento). del medio ambiente. A ninguno de los elementos de esta lista se le ha asignado un atributo de índice Z.
El fondo y el borde del elemento crean un contexto de apilamiento.
Cita:
·Los elementos del contexto de apilamiento con valores negativos se organizan en el orden de aparición (cuanto más tarde sea el nivel, más alto será)
·Los elementos a nivel de bloque que no están posicionados ni flotantes se organizan en el orden de aparición.
·Los elementos flotantes no posicionados se organizan en el orden de aparición.
·Los elementos en línea se organizan en orden de aparición.
·Los elementos colocados se organizan en orden de aparición.
La propiedad del índice Z, cuando se usa correctamente, cambia el orden de apilamiento natural.
Por supuesto, el orden de apilamiento de los elementos no es particularmente obvio a menos que se hayan colocado de manera que se superpongan entre sí. A continuación, se muestra una CAJA con márgenes negativos para ilustrar la secuencia de apilamiento natural.
El CAJA anterior está definido con diferentes colores de fondo y borde, y los dos últimos están escalonados y definen un margen superior negativo, para que podamos ver el orden de apilamiento natural. La CAJA gris está en el primer lugar de la marca, la CAJA azul está en el segundo lugar y la dorada está en el tercer lugar. Los márgenes negativos aplicados indican claramente el hecho de que estos elementos no tienen establecida una propiedad de índice Z; su orden de apilamiento es natural, o la regla compuesta predeterminada. El fenómeno del entrelazado se debe a márgenes negativos.