Orden Z

El orden Z es una ordenación de objetos bidimensionales superpuestos, como ventanas en un gestor de ventanas apilables , formas en un editor de gráficos vectoriales u objetos en una aplicación 3D. ^{[ 1 ]} Una de las características de una interfaz gráfica de usuario típica es que las ventanas pueden superponerse, de modo que una ventana oculta parte o la totalidad de otra. Cuando dos ventanas se superponen, su orden Z determina cuál aparece encima de la otra.

El término "orden Z" se refiere al orden de los objetos a lo largo del eje Z. En geometría de coordenadas , X suele referirse al eje horizontal (de izquierda a derecha), Y al eje vertical (de arriba abajo) y Z al eje perpendicular a los otros dos (hacia adelante o hacia atrás). Podemos imaginar las ventanas de una interfaz gráfica de usuario (GUI) como una serie de planos paralelos a la superficie del monitor. Por lo tanto, las ventanas se apilan a lo largo del eje Z, y la información del orden Z especifica el orden de las ventanas en la pantalla de adelante hacia atrás. Una analogía sería el de varias hojas de papel esparcidas sobre una mesa, donde cada hoja representa una ventana, la mesa la pantalla del ordenador y la hoja superior tiene el valor Z más alto.

Normalmente, los usuarios de una interfaz gráfica de usuario (GUI) pueden modificar el orden Z seleccionando una ventana para colocarla en primer plano (es decir, "encima" o "delante" de las demás). Algunos gestores de ventanas permiten interactuar con ellas aunque no estén en primer plano, mientras que otros las colocan en primer plano cada vez que reciben una entrada del usuario. También es posible designar ventanas especiales como "siempre visibles"; estas se fijan en la parte superior del orden Z, de modo que (salvo algunas excepciones) ninguna otra ventana puede superponerse a ellas.

Al trabajar con objetos visuales en una pantalla de ordenador, un objeto con un orden Z de 1 se sitúa visualmente "debajo" de un objeto con un orden Z de 2 o superior. Esto equivale a crear "capas" de objetos, donde el orden Z determina qué objeto se encuentra encima de otro. Una página HTML puede usar CSS para especificar el orden Z, de modo que algunos objetos se superpongan a otros.

El ordenamiento Z también se utiliza en aplicaciones 3D para determinar la visibilidad de los objetos en función de su superposición con otros objetos. Esto proporciona una ventaja de velocidad al usuario, ya que el ordenador no necesita renderizar objetos que no se ven. ^{[ 1 ]} En la práctica, por supuesto, algunos objetos pueden estar solo parcialmente ocultos, y esta es una complicación que debe tenerse en cuenta.

En los inicios de los gráficos 3D en tiempo real, el orden Z se aplicaba a cada polígono individualmente para evitar el uso del búfer Z, que en aquel entonces se consideraba costoso. En los gráficos 3D modernos, el orden Z se utiliza para la renderización dependiente del orden, por ejemplo, con objetos semitransparentes. También puede utilizarse para reducir el problema de la superposición de polígonos (Z-fighting) , ya sea renderizando primero los objetos más lejanos y luego utilizando una desigualdad débil como prueba de profundidad o, por el contrario, renderizando de adelante hacia atrás y utilizando una desigualdad estricta.

El número real asignado a una posición particular en el orden Z se conoce a veces como índice Z. En particular, la propiedad CSS que establece el orden de apilamiento de elementos específicos se conoce como índice Z. Un elemento con un orden de apilamiento mayor siempre está delante de otro elemento con un orden de apilamiento menor. ^{[ 2 ]}

Los valores negativos también se pueden usar de la misma manera. Un valor negativo aparecerá detrás de uno positivo. z-indexSolo funciona en elementos que tienen un valor de posición (por ejemplo, position: relative;) y para muchos programadores, esta es una de las primeras cosas que investigar al depurar por qué el z-index no funciona. ^{[ 3 ]}

Al igual que todas las demás propiedades CSS, se puede configurar con JavaScript , con la siguiente sintaxis:

objeto.estilo.zIndex = 1 ;​​​​

• búfer Z