¿Qué es el índice z? CSS de la A a la Z: propiedad de índice z. Manejo incorrecto en IE y Firefox
De hecho, los elementos dentro de un documento HTML se generan en tres dimensiones. Además de ajustarse a los ejes X e Y, también se pueden colocar a lo largo del eje Z. Para hacer esto, el elemento debe tener una posición CSS relativa u otros valores para esta propiedad establecida:
Propiedades como margin , float y offset controlan dónde se ubicará el elemento en los ejes x e y, mientras que la propiedad z-index controla dónde se ubicará en el eje z.
propiedad del índice z
Esta propiedad le permite definir:
- La ubicación del elemento actual en la pila;
- Si el elemento actual define un nuevo contexto de superposición ( nivel de apilamiento).
Esta propiedad solo se aplica a elementos con posicionamiento establecido. Es decir, la propiedad de posición del elemento debe establecerse en relativa, absoluta o fija. La propiedad del índice z tiene tres valores:
Código de ejemplo
índice z: automático |
Nivel de pila (orden de visualización de elementos)
Este valor determina exactamente en qué parte del eje Z se encuentra el elemento. Cómo numero mayor, más alto estará el elemento en la pila y hacia la “superficie” de la pantalla:
Si no se especifica la propiedad del índice z, el nivel del elemento en la pila se establecerá de acuerdo con el orden en que se coloca en el árbol del documento. Los elementos que se especifican más adelante en el código tendrán una posición de pila más alta de forma predeterminada.
Calcular la posición en la pila.
Además de la propiedad del índice z, la posición CSS relativa de un elemento en la pila también se ve afectada por varios factores. Los elementos están dispuestos en la pila en el siguiente orden:
| Posición | Descripción | código CSS |
| 1 (abajo) | El elemento forma el contexto de superposición. | índice z: |
| 2 | Elementos secundarios con un nivel de pila negativo. | índice z: |
| 3 | Elementos secundarios con estilo In-flow, no en línea o sin conjunto de posicionamiento. | mostrar: /* no en línea */ posición: estática |
| 4 | Flotante elementos secundarios sin posicionamiento establecido. | flotador: izquierda | bien posición: estática |
| 5 | Elementos secundarios con estilo en línea In-flow o sin posicionamiento establecido. | mostrar: /* en línea */ posición: estática |
| 6 | Elementos secundarios con nivel de pila 0. | índice z: automático | 0 posición: relativa | absoluto | fijado |
| 7 (arriba) | Elementos secundarios con un nivel de pila positivo. | índice z: posición: relativa | absoluto | fijado |
Contexto de apilamiento
Al especificar la posición CSS relativa al índice z, no siempre lo definimos en relación con todos los demás elementos de la página. El nivel de pila de un elemento refleja sólo su posición dentro de un contexto de superposición particular.
Esto puede llevar a una situación en la que un elemento con un valor de índice z más alto no estará "encima" de un elemento con un valor más bajo.
El contexto de superposición se puede explicar mediante las siguientes reglas:
1. El contexto de superposición original está contenido en el elemento raíz.
El contexto de superposición inicial en cualquier documento HTML está encerrado en elemento raíz . Hasta que se creen nuevos contextos, el nivel de elemento en la pila será el predeterminado para todos los elementos de la página.
2. Cree nuevos contextos con la propiedad de índice z especificada
Creamos un nuevo contexto de superposición estableciendo la propiedad de índice z del elemento en cualquier número entero. Esto hace posible especificar el nivel del elemento actual en la pila como un número entero, así como crear un nuevo contexto de superposición.
Posteriormente, el nuevo contexto se aplicará a todos los elementos secundarios. de este elemento. Su nivel ahora se indica sólo dentro de un contexto determinado y no se aplica al elemento raíz.
En el siguiente ejemplo, .foo está en el contexto de superposición 1 y .bar está en el contexto de superposición 2:
3. Los elementos no se pueden colocar encima o debajo del nivel principal.
Si un elemento principal tiene un conjunto de índice z relativo de posición CSS, entonces todos los elementos secundarios no pueden ubicarse por encima o por debajo de ese nivel ( dentro del contexto de superposición del elemento principal). En el siguiente ejemplo, aunque .bar tiene un índice z más alto que .baz, el elemento todavía está ubicado "debajo" de él. Esto se debe a que en el contexto 1, .bar no se puede colocar por encima o por debajo del nivel 1.
CSS
.foo (índice z: 1;)
.bar (índice z: 1000;)
.baz (índice z: 2;)
La traducción del artículo “Cómo funciona el índice z” fue preparada por el amigable equipo del proyecto.
Bueno Malo
La mayoría de las propiedades CSS son bastante fáciles de usar. A menudo, aplicar una propiedad CSS a un elemento en su marcado producirá resultados inmediatos: tan pronto como actualice la página, se aplicará el conjunto de valores de la propiedad y verá inmediatamente el resultado. Otras propiedades CSS, sin embargo, son más complejas y sólo funcionarán después de establecer un conjunto específico de condiciones.
La propiedad del índice z pertenece al último grupo de propiedades. Esta propiedad ha causado confusión y frustración generalizadas con más frecuencia que cualquier otra propiedad CSS existente. Irónicamente, sin embargo, cuando llegas a conocer índice z, te darás cuenta que esta propiedad es muy sencilla y ofrece método efectivo soluciones a muchos problemas de diseño.
En este artículo, aprenderá qué es el índice z, cómo se puede malinterpretar y algunos ejemplos de su uso. Además, aprenderá algunas diferencias en el comportamiento de los navegadores al manejar la propiedad z-index, esto concierne principalmente versiones anteriores Explorador de Internet y Firefox. Este detallado revisión del índice z proporcionará a los desarrolladores una base excelente para utilizar esta propiedad con confianza y eficacia.
¿Qué es?
Propiedad índice z define el nivel de pila de un elemento HTML. "Nivel de pila" se refiere a la posición de un elemento en el eje Z (direccionalmente perpendicular al eje X o al eje Y). El elemento que se asigna más gran valor El índice z se ubicará en la parte superior de la pila de capas. Esta pila de capas se coloca perpendicular a la pantalla o área de visualización.
Vista 3D del eje Z:
Para demostrar cómo funciona. índice z, la imagen de arriba amplía ligeramente la visualización de los elementos de la pila en relación con la ventana gráfica.
Orden de pila normal
En una página HTML, el orden de pila normal (es decir, el orden de los elementos en el eje Z) está determinado por varios factores. La siguiente es una lista que muestra el orden en que se apilan los elementos, comenzando desde abajo. No hay elementos en esta lista con la propiedad índice z asignada:
- El fondo y el borde de un elemento que crea el contexto de la pila.
- Elementos con contexto de pila negativo, en orden de aparición
- Elementos de bloque no posicionados, no flotantes, en orden de aparición
- Elementos flotantes no posicionados, en orden de aparición.
- Elementos en línea, en orden de aparición.
- Elementos posicionados, en orden de aparición.
Cuando la propiedad del índice z se usa correctamente, puede cambiar el orden de pila normal.
Por supuesto, el orden de los elementos en una pila no es tan claro siempre que los elementos estén colocados superpuestos entre sí. Entonces, para ver el orden de pila normal, puedes usar márgenes negativos como a continuación:
bloque gris
bloque azul
bloque marrón
Los bloques mostrados arriba tienen asignados diferentes color de fondo y color del borde, y a los dos últimos bloques se les asigna específicamente un relleno superior negativo para ilustrar el orden de apilamiento normal. El bloque gris aparece primero en el diseño, el bloque azul en segundo lugar y el bloque marrón en tercer lugar. Los márgenes negativos asignados demuestran perfectamente este hecho. Estos elementos no tienen valores asignados. índice z, se encuentran en la página en el orden habitual o de forma predeterminada. Se superponen gracias a márgenes negativos.
¿Por qué hay confusión?
Aunque el índice z no es una propiedad difícil de entender, si se malinterpreta, puede resultar confuso para los desarrolladores novatos. Este error se produce porque la propiedad del índice z solo funcionará en un elemento que tenga su propiedad de posición establecida en uno de tres valores: absoluto, fijado o relativo.
Para demostrar que el índice z solo funciona en elementos posicionados, aquí están los mismos tres bloques, junto con los valores del índice z aplicados para cambiar el orden normal de las capas:
bloque gris
bloque azul
bloque marrón
El bloque gris tiene un valor de índice z establecido en “9999”; el bloque azul tiene un valor de índice z establecido en "500"; y el bloque marrón, el valor del índice z se establece en “1”. Sería lógico suponer que el orden en el que se apilan los bloques debería cambiar. Pero esto no sucedió en en este ejemplo porque ninguno de estos elementos tiene una propiedad de posición asignada.
Aquí están los mismos bloques, pero con la posición: propiedad relativa agregada a cada uno de ellos y las propiedades del índice z previamente asignadas:
bloque gris
bloque azul
bloque marrón
Ahora obtuvimos el resultado deseado: el orden de los elementos ha cambiado; el bloque gris se superpone al azul y el azul, a su vez, se superpone al marrón.
Sintaxis
La propiedad del índice z puede afectar el orden de las capas, tanto de bloque como elementos en línea y se establece asignando un valor positivo o negativo, entero o automático. El valor auto le da al elemento el mismo orden de capas que su elemento principal.
Así es como se ve el código CSS para el tercer ejemplo, donde la propiedad índice z se aplica correctamente:
#grey_box (ancho: 200px; alto: 200px; borde: sólido 1px #ccc; fondo: #ddd; posición: relativa; índice z: 9999; ) #blue_box (ancho: 200px; alto: 200px; borde: sólido 1px # 4a7497; fondo: #8daac3; posición: relativa; índice z: 500; ) #gold_box (ancho: 200px; alto: 200px; borde: sólido 1px #8b6125; )
Nuevamente, vale la pena recordar, especialmente para los desarrolladores novatos, que la propiedad del índice z no funcionará hasta que aplique el posicionamiento al elemento.
Usando JavaScript
Si desea cambiar dinámicamente el valor del índice z de un elemento, con usando javascript, entonces es bastante simple. La sintaxis es la misma que para acceder a la mayoría de las propiedades CSS, simplemente reemplace las propiedades CSS con guiones con el código como se muestra a continuación:
Var myElement = document.getElementById("caja_oro"); myElement.style.position = "relativo"; myElement.style.zIndex = "9999";
Como se muestra en el ejemplo, la propiedad CSS "z-index" se escribe como "zIndex". Del mismo modo, "color de fondo" se convierte en "color de fondo", "peso de fuente" se convierte en "peso de fuente", y así sucesivamente.
Además, al usar el código anterior, la propiedad de posición se cambia porque el índice z solo funcionará en un elemento posicionado.
Manejo incorrecto en IE y Firefox
En determinadas circunstancias, en algunos navegadores, la propiedad z-index puede tratarse de forma diferente, esto se aplica a navegador de internet Explorer versiones 6 y 7, así como Versiones de Firefox 2.
Elementos
En Internet Explorer 6, el elemento
Elemento
– Seleccionar año – 2009 2010 2011
bloque marrón
Si observa este ejemplo, utilizando el navegador IE6, verá que el elemento
Este error en IE6 causa problemas con los menús desplegables que no pueden superponer elementos