¿Por qué no funciona Z-Index?

El CSS "índice z"Determina el orden de apilamiento del elemento HTML. A medida que su valor aumente, se colocará por delante de otros elementos. Por defecto, cada elemento en la página web tiene una posición estáticamente definida. Sin embargo, el "índice z" funciona solo en los elementos posicionados.

Este artículo lo guiará a través de la posible solución al problema del índice Z no funciona:

• Establecer la posición del elemento.
• Los elementos con el mismo valor de índice Z se acumularán en orden de apariencia.
• Establecer el nivel de apilamiento del elemento secundario en relación con su padre.

Requisito previo: Crear una página HTML

En el HTML, haz cuatro ""Contenedores. Primero, agregue una etiqueta "" y asigne la clase "Main-1". Dentro de esto, agregue tres hijos "" elementos que tienen clases "sub-main-1","sub-main-2", y "sub-main-3":

padre
1
2
3

En CSS, diseñe los elementos "" para cambiar sus formas.

Clase de estilo "Main-1"

.Main-1
Ancho: 150px;
Altura: 150px;
Color de fondo: Bisque;
Margen: 50px Auto;
Posición: relativo;

Aquí:

• "ancho"Determina la amplitud del elemento.
• "altura"Establece la altura del elemento.
• "color de fondo"Aplica el color de fondo del elemento.
• "margen"Agrega espacio alrededor del elemento.
• "posición"Con el valor"relativo"Coloca el elemento en relación con su posición actual.

Clase de estilo "Sub-Main-1"

El "sub-main-1La clase está diseñada con las siguientes propiedades para hacer un cuadro 1:

.sub-main-1
Ancho: 150px;
Altura: 150px;
Color de fondo: CadetBlue;
Posición: Absoluto;
arriba: 30px;
Izquierda: 20px;

Aquí:

• "posición"Con el valor"absoluto"Posiciona el elemento de acuerdo con su elemento posicionado principal.
• "arriba" y "izquierda"Se utilizan para agregar espacio en la parte superior e izquierda del elemento.

Clase de estilo "Sub-Main-2"

Para el cuadro 2, se aplican los siguientes estilos:

.sub-main-2
Ancho: 150px;
Altura: 150px;
Color de fondo: RGB (223, 134, 186);
Posición: Absoluto;
Arriba: 60px;
Izquierda: 50px;

Clase de estilo "Sub-Main-3"

Las siguientes propiedades de CSS se aplican para hacer el cuadro 3:

.sub-main-3
Ancho: 150px;
Altura: 150px;
Color de fondo: RGB (210, 243, 186);
Posición: Absoluto;
Arriba: 90px;
Izquierda: 80px;

Las cuatro cajas se han creado con éxito y están en orden de apilamiento natural:

Establecer la posición del elemento

Lo importante a considerar es que el "índice z"La propiedad solo funciona con elementos posicionados. Agregue la propiedad "Index Z" con cualquier valor, como "1". Entonces, si eliminamos el "posición"Propiedad del"sub-main-2"Clase, la"índice z"La propiedad no funcionará:

Los elementos con el mismo valor de índice Z se acumularán en orden de apariencia

Si todos los elementos se ajustan con los mismos "índice z"Valor, todos se apilarán en su orden de apariencia. Por lo tanto, aumente el valor de la propiedad "índice z" del elemento que desea mostrar frente a todos.

Implementemos con la ayuda de un ejemplo:

Padre 1
Niño 1
Niño 2

En CSS, asigne cada clase con la propiedad "Index Z" que tiene el valor "1". La página web se verá así:

Establecer el nivel de apilamiento del elemento infantil en relación con su padre

Los hijos de la pila de elementos principales en relación con su elemento principal. No afectarán el orden de apilamiento del otro elemento hermano.

Para una buena comprensión, analice el siguiente ejemplo.

Crear un archivo html

• Primero, agregue un ""Elemento para el padre 1 y asignarlo una clase"Main-1".
• Dentro de esto, agregue "" elementos para sus hijos, niño 1, niño 2 y capa modal.
• Al final, agregue un elemento "" para el padre 2:

Padre 1
Niño 1
Niño 2


Padre 2

Selecciona el "Main-1" clase "índice z"Valor como"2":

índice z: 2;

Clase de estilo "Modal infantil"

.niño-modal
Posición: fijo;
arriba: 0px;
Izquierda: 0px;
Ancho: 100%;
Altura: 100 VH;
Índice Z: 100;
Color de fondo: RGBA (0, 0, 0, 0.295);

El "moderno"Clase" "índice z"El valor se establece como"100", Lo que significa que debe estar frente a sus elementos hermanos.

Selecciona el "índice z"Valor del"sub-main-2" clase "5":

índice z: 5;

Selecciona el "índice z"Valor del"Main-2" clase "3":

Índice Z: 3;

Podemos observar en la imagen a continuación que el hermano "Main-2"Del elemento principal está frente al"Main-1"Padre Aunque uno de los elementos infantiles tiene un mayor"índice z" valor. Esto se debe a que la clase principal "Main-1" tiene el valor de la propiedad "Index Z" "2" y el "Main-2" tiene un valor "3" 3 ":

Estas son las razones por las cuales el índice Z no funciona.

Conclusión

El "índice z"La propiedad funciona en los elementos posicionados, como los elementos que tienen"posición" propiedad "absoluto","fijado", o más. Si el valor de "índice z" del elemento principal es menor que su elemento hermano, y el hijo del antiguo elemento principal tiene un mayor valor de "índice z", el elemento principal de los hermanos se mostrará frente a todos. Esta redacción ha discutido la propiedad de "índice z" y por qué no funciona.