Porque intuitivamente pensamos que las páginas web HTML son bidimensionales, porque el texto, las imágenes u otros elementos están organizados en orden. Sin embargo, la página web real es tridimensional y puede ocurrir apilamiento (superposición) entre elementos. a través de CSS La propiedad z-index establece el orden de apilamiento de los elementos.
1. El significado del atributo de índice z
El orden de apilamiento de un elemento en el documento, utilizado para confirmar el nivel de apilamiento del elemento en el contexto de apilamiento actual. Los elementos con un orden de apilamiento más alto siempre aparecerán delante de los elementos con un orden de apilamiento más bajo.
(1) Cuanto mayor sea el valor del atributo del índice z, mayor será.
(2) Los elementos pueden tener valores de atributo de índice z negativos.
(3) índice z y números específicos.
(4) El valor del índice z no sigue la unidad.
Como se muestra a continuación:
Como se muestra en la figura anterior, el nombre de esta propiedad se deriva del sistema de coordenadas, donde el eje x va de izquierda a derecha y el eje y va de arriba a abajo. De la pantalla al usuario es el eje z. En este sistema de coordenadas, los elementos con un valor de índice z más alto están más cerca del usuario que los elementos con un valor de índice z más bajo. Es decir, los elementos con un valor de índice z más alto se muestran primero en el campo de visión del usuario. , Lo que da como resultado que los elementos con valores de índice z altos más largos cubran otros elementos, lo que también se denomina apilamiento o apilamiento.
Puede crear diseños de páginas web más complejos a través del atributo z-index. Los valores opcionales del atributo z-index se muestran en la siguiente tabla:
Hay los siguientes puntos a tener en cuenta con respecto a la relación jerárquica de elementos:
(1) Para elementos cuyo atributo de posición no está establecido o cuando el valor del atributo de posición es estático, el elemento definido posteriormente sobrescribirá el elemento anterior;
(2) Para los elementos que tienen un atributo de posición establecido y el valor del atributo no es estático, estos elementos sobrescribirán los elementos que no tienen un atributo de posición establecido o cuyo valor del atributo de posición es estático;
(3) Para los elementos cuyo valor de atributo de posición no es estático y que tiene un atributo de índice z definido, los elementos con un valor de atributo de índice z mayor sobrescribirán los elementos con un valor de atributo de índice z más pequeño, es decir, cuanto mayor sea el valor de atributo de índice z -valor del atributo de índice, mayor será la prioridad. Alta, si los valores del atributo de índice z son los mismos, los elementos definidos posteriormente sobrescribirán los elementos definidos anteriormente;
(4) El atributo de índice z solo es efectivo cuando el elemento define el atributo de posición y el valor del atributo no es estático.
Caso de aplicación del índice 2.z
Ejemplo:
<!DOCTYPEhtml><html><head><metacharset=utf-8><title>CSSz-index</title><styletype=text/css>div{width:200px;height:200px;text-align:center; tamaño de fuente: 50 px; altura de línea: 200px;position:absolute;}#red{left:100px;top:100px;}#green{left:200px;top:200px;}</style></head><body><!--Índice Z en cascada Principios sexuales: 1. Los elementos en el mismo nivel (o posición: estático) de forma predeterminada sobrescribirán los elementos anteriores en el flujo de documentos. (Viniendo desde atrás) 2. Para elementos del mismo nivel, si la posición no es estática y existe un índice z, el elemento con un índice z más grande cubrirá el elemento con un índice z más pequeño, es decir, cuanto más grande Cuanto mayor sea el índice z, mayor será la prioridad. --><divid=redstyle=fondo:rojo;z-index:0;>A</div><divid=greenstyle=fondo-color:verde;>B</div><divid=bluestyle=fondo-color: azul;índice z:-1;>C</div></body></html>Resultados de ejecución:
Algunos malentendidos sobre el índice z
Generalmente diremos que el atributo z-index solo funciona cuando se usa con elementos posicionados (elementos cuya posición no es estática). En primer lugar, esta afirmación es incorrecta, porque en CSS3, los elementos secundarios del flex box también se pueden usar. Establezca el atributo de índice z.