¿Qué es la propiedad del índice Z en CSS??

Las hojas de estilo en cascada (CSS) proporcionan una gama enorme de propiedades que especifican cómo aparecerán los elementos HTML en las páginas web, por ejemplo, la propiedad de visualización define el comportamiento de visualización de los elementos, la propiedad de posición especifica la posición de los elementos, la propiedad de color de fondo proporciona fondo. color a elementos, y la lista continúa. Este artículo está especialmente diseñado para enfatizar la importancia de la propiedad del índice Z en CSS.

En HTML, los elementos tienen un cierto orden de apilamiento que especifica la disposición en la que se colocan elementos. La regla definida para el posicionamiento del elemento es que el elemento que tiene un orden de apilamiento más alto se coloca frente al elemento con orden de apilamiento más bajo. Un orden de pila de un elemento puede exhibir valores positivos y negativos.

¿Qué es la propiedad del índice Z en CSS?

La propiedad del índice Z define el orden de pila de elementos HTML de una manera que especifica qué elemento se mostrará en el frente y qué elemento se muestra en segundo plano.

Sintaxis

Index Z: valor;

La propiedad del índice Z puede exhibir ciertas propiedades que se explican en detalle a continuación.

Valor	Descripción
auto	Este valor establece el orden de pila de elementos igual al de sus elementos principales.
número	Este valor se usa para dar manualmente un orden de pila a un elemento. El orden de la pila puede exhibir valores positivos y negativos.
inicial	Este valor establece el orden de pila de un elemento en su valor predeterminado.
heredar	Este valor establece el orden de pila de un elemento de acuerdo con las propiedades que el elemento heredó de su elemento principal.

Aquí hemos ilustrado la propiedad del índice Z con la ayuda de algunos ejemplos.

Ejemplo 1

Supongamos que desea proporcionar una imagen de fondo en su sitio web y desea que sus otros elementos se muestren frente a esa imagen. Use el siguiente fragmento de código.

Html

La caminata matutina es beneficiosa para la salud

En el ejemplo anterior, hay dos elementos uno es un

elemento y el otro es un elemento.

CSS

H2
Posición: relativo;
Izquierda: 200px;
arriba: 0px;

img
Índice Z: -1;
Posición: Absoluto;
Izquierda: 200px;
arriba: 0px;

El elemento se coloca en el fondo del

elemento porque la propiedad del índice Z asignada al elemento es -1. Además, el

El elemento se coloca relativamente 200px desde la izquierda y 0px desde la parte superior, mientras que el elemento tiene una posición absoluta, lo que significa que se colocará 200px desde la izquierda y 0px desde la parte superior, con respecto a la posición de su elemento ancestro .

Producción

Aquí hay una salida del ejemplo anterior.

Ambos elementos apilaron con éxito.

Ahora, si eliminamos el valor del índice Z del elemento, entonces se colocará frente al

elemento porque se define el último en el flujo del documento.

img
/*z -índice: -1;*/
Posición: Absoluto;
Izquierda: 200px;
arriba: 0px;

Producción

Ahora el

El elemento se coloca detrás del elemento.

Ejemplo 2

En este ejemplo, hemos demostrado el uso del valor positivo del índice Z, además, en este ejemplo hemos ilustrado cómo colocar un elemento detrás de cierto elemento. Aquí se crean dos elementos.

Html

Div 1
Div 2

El primer DIV tiene una posición relativa, lo que significa que se colocará 20px desde la izquierda y 10px desde la parte superior en relación con su posición original, además, le hemos asignado un valor de índice z de 1.

.Div1
índice z: 1;
Posición: relativo;
Izquierda: 20px;
arriba: 10px;
borde: 3px gris sólido;
Altura: 100px;
Ancho: 300px;

Para el segundo div, le hemos asignado una posición absoluta, lo que significa que se colocará 100px desde la izquierda y 60 px desde la parte superior con respecto a la posición de su elemento principal.

.Div2
Posición: Absoluto;
Izquierda: 100px;
Arriba: 60px;
Color de fondo: Indianred;
Altura: 80px;
Ancho: 200px;

Producción

Div 2 apilado con éxito detrás de Div 1.

Puntos para recordar!

1. Debe definir la posición de los elementos o de lo contrario la propiedad del índice Z no funcionará. (Los elementos pueden tener posiciones absolutas, relativas, fijas o pegajosas).

2. Sin especificar la propiedad del índice Z, si dos elementos se agitan uno sobre el otro, entonces el elemento que se define el último en el flujo del documento se coloca frente al otro elemento.

Conclusión

La propiedad del índice Z se utiliza para establecer el orden de apilamiento de los elementos HTML, lo que significa que especifica el arreglo de los elementos que se muestran en la página web. La propiedad del índice Z exhibe cuatro valores que son; Auto que establece el orden de pila de elementos iguales a la de sus elementos principales, el número se usa para dar manualmente un orden de pila a un elemento, inicial establece el orden de pila de un elemento en su valor predeterminado y Hereder establece el orden de pila de un elemento según las propiedades que el elemento heredó de su elemento principal. Esta publicación analiza la propiedad del índice Z en profundidad con la ayuda de ejemplos adecuados.