Creo que todos están familiarizados con la propiedad CSS del índice z, que generalmente se usa para controlar el orden de visualización (en cascada) entre dos o más elementos cuando se superponen.
¿Por qué se establece el índice z pero no tiene efecto?
Veamos este ejemplo. ¿Por qué el índice z de box1 está configurado para ser mayor que el valor del índice z de box2 y por qué box1 no se muestra encima de box2?
/* css */
.box1{
z-index: 10;
background-color: red;
}
.box2{
z-index: 5;
background-color: blue;
margin-top: -50px;
}
/* html */
<div class="box1">box1</div>
<div class="box2">box2</div>
contexto en cascada
La razón por la que el índice z que establece no tiene efecto es porque los elementos que establece no forman un contexto de apilamiento . Entonces, ¿qué es un contexto de apilamiento? Puede entender que, en circunstancias normales, los elementos html se organizan a la izquierda y a la derecha, lo que equivale a estar dispuestos a lo largo de los ejes X e Y. Luego, el contexto en cascada nos presenta un concepto de eje Z. Si estamos frente al navegador ( página), la línea entre el navegador y el usuario es el eje z.
Cuando los elementos forman un contexto de apilamiento, puede establecer el valor del índice z para controlar el orden de apilamiento de los elementos en el eje z para lograr el efecto de "cubrir" entre elementos
generar contexto en cascada
El contexto en cascada se puede generar a través de las siguientes propiedades comunes
- El valor de la posición no es estático (tenga en cuenta que el índice z no puede ser automático cuando el valor es absoluto o relativo)
- display: flex; los elementos secundarios del diseño y el valor del índice z no pueden ser automáticos
- pantalla: cuadrícula; elementos secundarios del diseño y el valor del índice z no puede ser automático
- elementos con un valor de opacidad inferior a 1
- El valor de transformar no es ninguno.
- El valor de la perspectiva no es ninguno.
- El valor del filtro no es ninguno.
Mire un ejemplo: el valor del índice z es válido porque el valor de la posición está establecido.
<!-- css -->
.box1{
z-index: 10;
background-color: red;
position: relative;
}
.box2{
z-index: 5;
background-color: blue;
margin-top: -50px;
}
/* html */
<div class="box1">box1</div>
<div class="box2">box2</div>
por fin
Mira un ejemplo:
/* css */
.box{
width: 200px;
height: 100px;
background-color: red;
color: #fff;
z-index: 5;
position: relative;
}
.box1{
width: 120px;
height: 50px;
background-color: green;
color: #fff;
position: relative;
z-index: 10;
}
.box2{
width: 120px;
height: 50px;
background-color: rgb(70, 0, 128);
color: #fff;
position: relative;
z-index: 7;
margin-top: -10px;
padding-top: 10px;
}
.box3{
width: 120px;
height: 100px;
background-color: blue;
color: #fff;
margin: -70px 0 0 90px;
position: relative;
z-index: 6;
text-align: right;
}
/* HTML */
<div class="box">
<div class="box1">z-index: 10</div>
<div class="box2">z-index: 5</div>
</div>
<div class="box3">z-index: 4</div>
box, box1, box2 y box3 son cada uno un contexto de apilamiento. El contexto de apilamiento de box contiene box1 y box2, lo que indica que el contexto de apilamiento puede contener contextos de apilamiento.
El valor del índice z de la caja es más pequeño que el valor del índice z de la caja 3, por lo que la caja 3 cubre la caja y se muestra en la capa superior. Sin embargo, los valores del índice z de la caja 1 y la caja 2 son mayores que el valor de la caja z. valor de índice de box3, pero también están cubiertos por box3 y se muestran en la capa inferior. La relación de apilamiento de elementos está limitada por el elemento principal, en otras palabras, el orden de apilamiento de dos elementos no se ve afectado por el tamaño del índice z del elemento hijo.
Consejo: ¿Cómo verificar si los elementos han formado un contexto en cascada?
Use la herramienta Edge browser, F12 y seleccione la pestaña de vista 3d. Marque la opción que se muestra en la figura a continuación.Cuando el elemento tiene un valor de índice z, significa que se forma un contexto de apilamiento.
