Reimpreso de Zhihu, he ganado mucho después de leer
En el pasado, no sabía por qué probé el valor del índice Z para resolver este tipo de problema. La gente también eligió 999,9999, que es bastante sin palabras, jaja.
El contenido copiado tiene algunas animaciones y vínculos. Puede ir al texto original si no puede verlo. . . .
Prefacio
Recientemente, encontré un problema de apilamiento de DOM al usar la animación CSS3, así que volví a aprender el índice z. Siento que esta propiedad CSS es bastante complicada. Espero que este artículo pueda ayudarlo a volver a comprender el encanto del índice z.
Esto es lo que sucedió (el fondo es un poco largo), y recientemente escribí la siguiente página de lista:
Luego agregue una animación CSS3 a cada artículo de producto, el efecto de animación probablemente sea así: dirección de demostración
El efecto después de la implementación probablemente sea así (la captura de pantalla es un poco vaga, se recomienda hacer clic en la dirección de demostración para verla):
La pantalla es normal en Chrome, pero cuando la abro desde Safari, encuentro que es terrible. La animación está muy atascada:
Al cambiar entre diferentes elementos de producto, verá que la animación de la página está obviamente atascada. Pensando en esto, no me molesta, así que agregué aceleración de hardware de animación 3D a cada elemento de producto. El método también es muy simple, como el siguiente:
.item {
transform: translateZ(0); /* 或者 will-change: transform; */
}Este es un método de optimización común para la aceleración de hardware. Si no lo entiende, puede leer esto: Use CSS para habilitar la aceleración de hardware para mejorar el rendimiento del sitio web.
Después de abrir Safari, descubrí que la animación de la página era muy fluida y la optimización de la aceleración del hardware fue exitosa, pero con ella apareció un nuevo problema, que es el problema de apilamiento de elementos DOM mencionado en este artículo.
Aunque se ha solucionado el efecto de animación, el apilamiento de elementos DOM de la página tiene un problema: es decir, los siguientes elementos de producto cubrirán la ventana emergente de entrada en la esquina inferior derecha de los elementos de producto anteriores, y el efecto normal que esperamos sea así:
Encontré tal problema, la primera reacción: luego aumentaré el índice z del cuadro emergente, es pan comido, pero no importa cómo ajuste el valor del índice z, el cuadro emergente siempre se ve afectado por el elemento de producto a continuación. Cubriéndome, al principio estaba desconcertado.
Finalmente, leí algunos materiales para estudiar y peinar, y finalmente encontré una solución. No hay mucha tontería, comenzaré a peinar todo el conocimiento relacionado con el índice z y presentaré una solución al problema anterior al final. (La siguiente explicación vendrá con muchos casos de uso. Publicaré todo el código en jsfiddle para una fácil referencia. Los lectores pueden hacer clic en la dirección de demostración para ver el ejemplo)
Conceptos básicos del índice z
Primero introduzca el índice Z. El atributo índice Z se usa para ajustar el orden de los elementos y subelementos en el eje Z. Cuando se sobrescribe un elemento, qué elemento está arriba y qué elemento debajo. En términos generales, los elementos con valores de índice z más grandes cubrirán los elementos inferiores.
El valor predeterminado del índice z es automático. Puede establecer un número entero positivo o negativo. Si no considera CSS3, solo funcionará el índice z del elemento de posicionamiento (posición: relativa / absoluta / fija). Si su z -index actúa sobre un elemento no posicionado (algunos CSS3 también tendrán efecto) y no tiene ningún efecto. Por ejemplo: dirección de demostración
Cuando configura el posicionamiento para el elemento DOM, el índice z del elemento entrará en vigencia, el valor predeterminado es automático, simplemente puede equipararlo al índice z: 0, como la dirección de demostración , es decir, el índice z entra en vigencia El requisito previo es que las propiedades de posicionamiento (o algunas propiedades de CSS3) se deben configurar para que surtan efecto.
Después de leer la demostración, es posible que se sienta desconcertado, por qué solo establezco una propiedad de posición sin establecer el valor del índice z, y por qué los cuadrados rojos cubrirán los cuadrados azules, aquí está el conocimiento del nivel de apilamiento del índice z .
Nivel de apilamiento
Un elemento DOM, independientemente del contexto de apilamiento, determinará el orden de visualización de los elementos en el eje Z según el nivel de apilamiento. En lenguaje sencillo, cuando se combinan y superponen diferentes elementos DOM, su orden de visualización Seguirá las reglas del nivel en cascada, y el índice z se usa para ajustar el orden de visualización de un elemento, de modo que el elemento pueda flotar hacia arriba y hacia abajo.
Entonces, ¿cuál es el nivel de cascada? El siguiente es el famoso nivel de apilamiento de 7 niveles (nivel de apilamiento)
Se puede observar que el nivel en cascada regula las reglas de presentación cuando los elementos se superponen, con esta regla no es difícil explicar por qué los cuadrados rojos del ejemplo anterior cubrirán los cuadrados azules. Porque cuando establece la propiedad position: relativa, el elemento z-index: auto tiene efecto y hace que el nivel de apilamiento aumente, que es más alto que el elemento en línea ordinario, por lo que el cuadrado rojo se mostrará en la parte superior.
Después de conocer las reglas de los niveles en cascada, permítanme dar algunos ejemplos para ilustrar:
Los elementos de bloque en línea / en línea son más altos que los elementos flotantes
La primera es que el elemento de bloque en línea / en línea es más alto que el elemento flotante: dirección de demostración
Se puede ver claramente que el texto (elemento en línea) cubre la imagen (elemento flotante).
Los elementos de bloque en línea / en línea son más altos que los elementos de bloque
ruinas del terreno de demostración
El cuadrado rojo (bloque en línea) cubre el cuadrado verde (bloque), pero debido a que el texto (pantalla: bloque) pertenece al nivel en línea, está al mismo nivel que el cuadrado rojo (bloque en línea) y sigue el principio de venir primero (explicado a continuación), No cubierto por elementos de bloque en línea.
El nivel de apilamiento de elementos es equivalente
Luego, cuando dos elementos se apilan en el mismo nivel, se deben seguir las siguientes dos pautas en este momento:
- Principio de llegar tarde
- Cuyo índice Z es grande, quién está en la regla
El principio de ponerse al día por detrás:
La última regla es que cuando los elementos se apilan en el mismo nivel, el siguiente DOM sobrescribirá el elemento DOM anterior. Esto es fácil de entender, pero tengo que explicarlo. Es por eso que a menudo vemos por qué el último elemento cubrirá el elemento anterior.
Como en el ejemplo anterior, dado que el texto (display: block) pertenece al nivel inline, que es el mismo nivel que el cuadrado rojo (inline-block), sigue el principio de ir detrás (explicado más adelante) y no está cubierto por elementos inline-block, aquí No publicaré otro ejemplo para ilustrar.
Cuyo índice Z es grande, quién está arriba:
Debido a la existencia del índice z, se puede ajustar el orden de los elementos en el mismo contexto de apilamiento. Luego, en el rango de valores del índice z negativos y positivos, el valor del índice z de los elementos DOM se encuentra dentro de estos dos rangos Cuanto mayor sea el valor, mayor será el orden de visualización.
Después de conocer el nivel de apilamiento, básicamente siempre que se determine el orden de visualización de los elementos en el mismo contexto de apilamiento, ¿cómo se pueden mostrar si se encuentran en contextos de apilamiento diferentes? ¿Qué significa este contexto en cascada? No te preocupes, mira hacia abajo.
Contexto en cascada
Contexto en cascada, puede entenderlo como el alcance en JS, a menudo hay más de un contexto en cascada en una página (porque hay muchas formas de generar contexto en cascada, pero no se da cuenta), en un contexto en cascada, seguimos Las reglas del nivel de apilamiento para apilar elementos.
Después de introducir el concepto de contexto en cascada, primero echemos un vistazo a las formas de crear un contexto en cascada.
En circunstancias normales, existen tres tipos principales de creación de contextos en cascada:
- Crear contexto en cascada de forma predeterminada
- Necesidad de cooperar con z-index para desencadenar la creación de contexto en cascada
- No es necesario cooperar con z-index para activar la creación de contexto en cascada
Uno, crea un contexto en cascada de forma predeterminada
El contexto en cascada se crea de forma predeterminada, solo con el elemento raíz HTML, que puede entender como la etiqueta del cuerpo. Pertenece al elemento de contexto raíz en cascada y no requiere ninguna propiedad CSS para activarlo.
Dos, es necesario cooperar con el índice z para desencadenar la creación de un contexto en cascada
Confiar en el valor del índice Z para crear un contexto en cascada:
- El valor de posición es relativo / absoluto / fijo (algunos navegadores)
- elemento flexible (la visualización del elemento principal es flex | inline-flex), tenga en cuenta que es un elemento secundario, no un elemento principal para crear un contexto de apilamiento
En estos dos casos, debe establecer un valor de índice z específico y no puede establecer el índice z en automático, que es una pequeña diferencia entre el índice z: automático y el índice z: 0.
Como mencionamos anteriormente, al configurar la posición: relativa, el valor del índice z tendrá efecto, pero en este momento, no se crea ningún contexto de apilamiento. Cuando el índice z no está configurado en automático, incluso configurar el índice z: 0 activará el elemento Crea un contexto en cascada.
Tres, no es necesario cooperar con el índice z para desencadenar la creación de un contexto en cascada
En este caso, básicamente lo activan las nuevas propiedades de CSS3. Las más comunes son:
- La opacidad del elemento es menor que 1
- El valor del modo de mezcla de mezcla del elemento no es normal
- El valor de los siguientes atributos del elemento no es ninguno:
- transformar
- filtrar
- perspectiva
- ruta del clip
- máscara / imagen-máscara / borde-máscara
- El valor del atributo isolution del elemento es aislar
- El atributo -webkit-overflow-scrolling del elemento es táctil
- El atributo will-change del elemento tiene un valor que creará un contexto en cascada.
Después de introducir el concepto de cómo crear un contexto en cascada y cómo crearlo, debe tenerse en cuenta que el elemento que creó el contexto en cascada puede comprender el contexto en cascada local, solo afecta a sus descendientes y su propio nivel en cascada está determinado por su contexto en cascada padre. decidido.
Compare el orden de visualización de dos elementos DOM
A continuación, resumamos cómo comparar el orden de visualización de dos elementos DOM.
- Si está en el mismo contexto de apilamiento, los elementos se muestran según las reglas del nivel de apilamiento
- Si se encuentra en diferentes contextos de apilamiento, primero busque el contexto de apilamiento del ancestro común y luego compare el nivel de apilamiento del contexto de apilamiento local donde los dos elementos se encuentran bajo el contexto de apilamiento común.
En estas dos oraciones se condensan miles de palabras, pero hay muchos puntos a los que prestar atención. Veamos primero el primer punto:
Contexto en cascada
Si está en el mismo contexto en cascada, los elementos se muestran de acuerdo con las reglas de nivel en cascada. Esto ya se introdujo al introducir el nivel en cascada. Cabe señalar que es probable que los elementos de la relación padre-hijo estén en el mismo contexto en cascada. En este caso La comparación de niveles de los elementos inferiores también se muestra de acuerdo con las reglas del nivel en cascada.
Por ejemplo: dirección de demostración
Comparación del elemento .box y su elemento secundario img: Debido a que img y .box pertenecen al mismo contexto de apilamiento, debido a que img z-index es -1, se hunde debajo del elemento principal. El elemento principal cubre la imagen, pero el img sigue siendo Por encima del color de fondo del cuerpo, debido a que sigue el nivel de apilamiento de 7 niveles, la parte inferior debe ser el fondo o borde del contexto de apilamiento (elemento del cuerpo).
Pero si dejamos que el elemento .box cree un contexto de apilamiento local, es diferente. El elemento .box y el elemento img también están en el mismo contexto de apilamiento, pero el contexto se cambia al contexto de apilamiento local creado por .box.
ruinas del terreno de demostración
Encontrará que el elemento img cubre el color de fondo de .box, porque el color de fondo del contexto de apilamiento es siempre el más bajo. El contexto de apilamiento cambia del elemento del cuerpo al elemento .box, pero si es el elemento span y el elemento img debajo de .box En comparación, el elemento en línea es más alto que el elemento con un índice z negativo, por lo que se muestra 2222 en la imagen.
A través de este ejemplo, quiero ilustrar que es más probable que el apilamiento de elementos primarios y secundarios sea un contexto de apilamiento local o no un contexto de apilamiento local, por lo que necesita encontrar un contexto de apilamiento común.
Diferentes contextos en cascada
Esto es más complicado y se puede resumir en una frase: Depende del dueño pelear con un perro. Déjame hacer un boceto para ilustrar:
El árbol DOM común en la página se ve así: Root, ParentX, ChildX son todos elementos de contexto apilados, no necesariamente los elementos principales de ABCD
- Un elemento quiere comparar con el elemento B o ChildB, estoy muy contento, pertenecen al mismo contexto de apilamiento (ChildB), solo juzgue según el nivel de apilamiento
- Si el elemento A quiere comparar con C o ChildA, busque su contexto de apilamiento de ancestro común (ParentB) y, después de encontrarlo, compare el nivel de apilamiento de acuerdo con el contexto de apilamiento local de los dos elementos bajo el contexto de apilamiento del ancestro (aquí, ChildA y ChildB) Comparar)
- De la misma manera, si A quiere luchar contra D, busque el contexto de apilamiento del ancestro (raíz) y luego compare los niveles de apilamiento de ParentA y ParentB.
¿Es muy simple? Aquí hay dos ejemplos simples para ilustrar:
Ejemplo 1: dirección de demostración
Aunque el índice Z de childA: 9999 es muy grande, cuando se compara con parentB o childB, no está calificado para comparar. Solo se puede comparar con su jefe, parentA. Cuando se compara parentA con parentB, descubrí: Maldita sea, resulta Su índice z es 2, que es más grande que el mío y es irrespetuoso, por lo que childA y parentA deben permanecer bajo parentB obedientemente.
Si cambiamos el ejemplo ligeramente, dejemos que parentA ya no cree nuevos elementos de contexto en cascada: dirección de demostración
Cuando parentA ya no crea el contexto en cascada, childA quiere comparar con childB, ya no se limita a parentA, sino que se compara directamente con parentB (porque childA y parentB están en el mismo contexto en cascada), obviamente childA está en la parte superior, esto también es Es por eso que childA cubre parentB.
La solucion al problema
Se han introducido los conocimientos teóricos. Si comprende la teoría anterior, este problema debería ser pan comido. Aquí está la solución al problema inicial:
Debido a que transform: translateZ (0) se agrega a cada artículo de producto, cada artículo de producto crea un contexto de apilamiento. De acuerdo con las reglas antes mencionadas, los elementos DOM de cada artículo de producto son independientes entre sí, según Cada artículo de producto (cada contexto de apilamiento parcial), y debido a que el nivel de apilamiento de estos artículos de producto es el mismo (igual que el índice z: auto), sigue el principio de penúltimo, lo que hace que los últimos elementos cubran los elementos anteriores. Dé un ejemplo simple: dirección de demostración
Así, incluso si agrega un atributo de índice Z al niño, no cambiará su nivel en cascada. La única forma es cambiar el valor del índice Z del elemento. Debido a que la parte que cubrimos es especial, solo la parte emergente , Y la parte emergente no se muestra de forma predeterminada. Solo se mostrará cuando el mouse esté sobre la entrada. La forma más fácil es aumentar el valor del índice Z cuando el mouse se coloca sobre el elemento para destruirlo. Características que vienen desde atrás: dirección de demostración
El efecto simplificado final:
Mejores prácticas
Hablando de esto, en realidad puede haber terminado. En el proceso de aprendizaje, vi el video grabado por Zhang Xinxu antes. Él propuso algunas de las mejores prácticas. Creo que es bastante bueno. Aquí hay una breve introducción:
- Sin violación de dos reglas: para elementos de capa no flotantes, evite establecer el valor del índice z, el valor del índice z no tiene ninguna razón para exceder 2
- Para los elementos de capa flotante, puede obtener el valor de índice z máximo del elemento secundario debajo del cuerpo a través de JS y luego agregarle 1 como valor de índice z del elemento de capa flotante
En el caso de los elementos de capa no flotantes, no utilice el índice z demasiado para ajustar el orden de visualización, pero utilice de forma flexible el nivel de apilamiento y los criterios de aparición para que los elementos obtengan la visualización correcta. Si desea configurar el índice z para ajustar, No se recomienda que el valor del índice z de los elementos de la capa no flotante exceda 2. Para los elementos DOM, -1, 0, 1, 2 son suficientes para que los elementos tengan el orden de visualización correcto.
Para los elementos de capa flotante, a menudo es desarrollado por componentes de terceros. Cuando no puede confirmar si su capa flotante estará cubierta al 100% en el árbol DOM, puede obtener dinámicamente el índice z máximo de todos los subelementos bajo el elemento del cuerpo de la página. Valor, agregue uno a esta base como el valor del índice z del elemento de capa flotante para asegurarse de que el elemento de capa flotante se pueda mostrar en la parte superior.
final
Finalmente, este artículo ha terminado para conocer las propiedades detalladas del índice Z. Siento que las propiedades CSS tienen muchos huevos de Pascua. Luego tengo tiempo para ponerme en contacto y resumir más, y continuaré compartiéndolas cuando tenga tiempo.