Descripción
Cualquier elemento colocado en una página web se puede apilar uno encima del otro en un orden específico, simulando así una tercera dimensión perpendicular a la pantalla. Cada elemento puede estar debajo o encima de otros objetos en la página web, su ubicación a lo largo del eje z está controlada por el índice z. Esta propiedad sólo funciona para elementos cuyo valor de posición es absoluto, fijo o relativo.
Sintaxis
índice z: número | automático | heredar
Valores
Como valores se utilizan números enteros (positivos, negativos y cero). Cuanto mayor sea el valor, mayor será el elemento en comparación con aquellos elementos que tienen un valor menor. Si el valor del índice z es igual, el elemento en primer plano es el que se describe a continuación en el código HTML. Aunque la especificación permite el uso de valores de índice z negativos, dichos elementos no se muestran en Navegador Firefox hasta la versión 2.0 inclusive.
Además de los valores numéricos, se utiliza auto: el orden de los elementos en este caso se construye automáticamente, en función de su posición en el código HTML y su pertenencia al elemento principal, ya que los elementos secundarios tienen el mismo número que su elemento principal. El valor heredado indica que se hereda del padre.
HTML5 CSS2.1 IE Cr Op Sa Fx
Capa 1 en la parte superior
Capa 4 en la parte superior
El resultado de este ejemplo se muestra en la Fig. 1.
Arroz. 1. Aplicar la propiedad del índice z
modelo de objetos
document.getElementById("elementID ").style.zIndex
Navegadores
Lista creada usando etiqueta
Las versiones de Internet Explorer hasta la 7.0 inclusive no admiten el valor heredado e interpretan auto como 0.
En las versiones del navegador Firefox hasta la 2.0 inclusive, un valor de índice z negativo coloca el elemento debajo del fondo de la página web y su contenido.
Cualquier elemento colocado en una página web se puede apilar uno encima del otro en un orden específico, simulando así una tercera dimensión perpendicular a la pantalla. Cada elemento puede estar debajo o encima de otros objetos en la página web, su ubicación a lo largo del eje z está controlada por el índice z. Esta propiedad sólo funciona para elementos cuyo valor de posición es absoluto, fijo o relativo.
Breve información
Designaciones
| Descripción | Ejemplo | |
|---|---|---|
| <тип> | Indica el tipo de valor. | <размер> |
| A && B | Los valores deben generarse en el orden especificado. | <размер> && <цвет> |
| Un | B | Indica que es necesario seleccionar solo un valor de los propuestos (A o B). | normales | pequeñas capitalizaciones |
| Un || B | Cada valor se puede utilizar de forma independiente o junto con otros en cualquier orden. | ancho || contar |
| Valores de los grupos. | [ cultivo || cruz ] | |
| * | Repita cero o más veces. | [,<время>]* |
| + | Repita una o más veces. | <число>+ |
| ? | El tipo, palabra o grupo especificado es opcional. | ¿recuadro? |
| (A,B) | Repita al menos A, pero no más de B veces. | <радиус>{1,4} |
| # | Repita una o más veces separadas por comas. | <время># |
Valores
Como valores se utilizan números enteros (positivos, negativos y cero). Cuanto mayor sea el valor, mayor será el elemento en comparación con aquellos elementos que tienen un valor menor. Si el valor del índice z es igual, el elemento en primer plano es el que se describe a continuación en el código HTML. Es aceptable utilizar un valor negativo.
Además de los valores numéricos, se utiliza auto: el orden de los elementos en este caso se construye automáticamente, en función de su posición en el código HTML y su pertenencia al elemento principal, ya que los elementos secundarios tienen el mismo número que su elemento principal.
Ejemplo
EN en este ejemplo Cuando pasa el cursor sobre el mapa, llega al borde frontal, superponiéndose parcialmente al resto de las imágenes (Fig. 1).
Arroz. 1. Cambiar el orden de las cartas
modelo de objetos
Objeto.style.zÍndice
Nota
Lista creada con
Las versiones de Internet Explorer hasta la 7.0 inclusive interpretan auto como 0.
En las versiones del navegador Firefox hasta la 2.0 inclusive, un valor de índice z negativo coloca el elemento debajo del fondo de la página web y su contenido.
Especificación
Cada especificación pasa por varias etapas de aprobación.
- Recomendación: la especificación ha sido aprobada por el W3C y se recomienda como estándar.
- Recomendación del candidato ( Posible recomendación) - el grupo responsable del estándar está satisfecho de que cumple sus objetivos, pero requiere ayuda de la comunidad de desarrollo para implementar el estándar.
- Recomendación propuesta Recomendación sugerida) - en esta etapa el documento se envía al Consejo Asesor del W3C para su aprobación final.
- Borrador de trabajo: una versión más madura de un borrador que ha sido discutido y modificado para revisión de la comunidad.
- Borrador del editor ( Borrador editorial) - una versión borrador del estándar después de que los editores del proyecto realizaron cambios.
- Borrador ( Borrador de especificación) - el primer borrador de la norma.
El índice z La propiedad CSS establece el orden z de un elemento posicionado y sus descendientes o elementos flexibles. Los elementos superpuestos con un índice z más grande cubren aquellos con uno más pequeño.
La fuente de este ejemplo interactivo está almacenada en un repositorio de GitHub. Si desea contribuir al proyecto de ejemplos interactivos, clone https://github.com/mdn/interactive-examples y envíenos una solicitud de extracción.
Para un cuadro posicionado (es decir, uno con cualquier posición que no sea estática), la propiedad del índice z especifica:
- El nivel de pila de la caja en el contexto de apilamiento actual.
- Si la caja establece un contexto de apilamiento local.
Sintaxis
/* Valor de palabra clave */ índice z: auto; /*La propiedad del índice z se especifica como palabra clave o como archivo .
Valores
auto El cuadro no establece un nuevo contexto de apilamiento local. El nivel de pila del cuadro generado en el contexto de apilamiento actual es el mismo que el del cuadro principal.Sintaxis formal
El tipo de datos CSS automático es un tipo especial deEjemplos
HTML
CSS
.cuadro-discontinuo ( posición: relativa; índice z: 1; borde: discontinuo; altura: 8 em; margen inferior: 1 em; margen superior: 2 em; ) .caja dorada ( posición: absoluta; índice z: 3 ; /* poner .gold-box encima de .green-box */ fondo: dorado; ancho: 80%; arriba: 3em (posición: absoluta; índice z: 2; /* poner .green-box; arriba .cuadro discontinuo */ fondo: verde claro; izquierda: 65% altura: 7em;Resultado
Presupuesto
| Especificación | Estado | Comentario |
|---|---|---|
| Transiciones CSS La definición de "comportamiento de animación para el índice z" en esa especificación. |
Borrador de trabajo | Define el índice z como animable. |
| CSS Nivel 2 (Revisión 1) La definición de "índice z" en esa especificación. |
Recomendación | Definición inicial |
| Valor inicial | auto |
|---|---|
| Se aplica a | elementos posicionados |
| Heredado | No |
| Medios de comunicación | visual |
| Valor calculado | como se especifica |
| Tipo de animación | un tipo de datos CSS se interpolan mediante pasos enteros discretos. El cálculo se realiza como si fueran números reales en coma flotante y el valor discreto se obtiene mediante la función suelo.">entero |
| Orden canónico | el orden único no ambiguo definido por la gramática formal |
| Crea contexto de apilamiento | Sí |
Compatibilidad del navegador
La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si desea contribuir con los datos, consulte https://github.com/mdn/browser-compat-data y envíenos una solicitud de extracción.
Actualizar datos de compatibilidad en GitHub
| De oficina | Móvil | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Cromo | Borde | Firefox | Explorador de Internet | Ópera | Safari | Vista web de Android | Chrome para Android | Firefox para Android | Ópera para Android | Safari en iOS | internet samsung | |
| índice z | Soporte completo de Chrome 1 | Soporte completo de borde 12 | Soporte completo para Firefox 1 | Es decir, soporte completo 4 | Ópera Soporte completo 4 | Soporte completo para Safari 1 | ||||||
| Valores negativos | Soporte completo de Chrome 1 | Soporte completo de borde 12 | Soporte completo para Firefox 3 | Es decir, soporte completo 4 | Ópera Soporte completo 4 | Soporte completo para Safari 1 | WebView Android Soporte completo Sí | Chrome Android Soporte completo Sí | Firefox Android Soporte completo 4 | Opera Android Soporte completo Sí | Safari iOS Soporte completo Sí | Samsung Internet Android Soporte completo Sí |
La lección de hoy, como la de ayer, te hablará sobre el posicionamiento en CSS, así como sobre una propiedad muy interesante llamada índice z.
Con esta propiedad, puede colocar bloques de texto (y no solo texto) uno encima del otro, mientras obtiene algo así como un efecto 3D.
Esta lección será de gran utilidad para los principiantes en el diseño web, ya que además de la información teórica, también veremos un ejemplo práctico.
Para mayor claridad, mire las dos imágenes a continuación:
"Posicionamiento relativo"
"Posicionamiento absoluto"
Como puede ver, con el posicionamiento relativo, el bloque con texto se coloca en relación al párrafo con texto. Cuando es absoluto, en relación con la ventana del navegador.
El funcionamiento de esta propiedad se explica más fácilmente con una imagen:
El elemento con mayor valor se colocará arriba.
Ahora echemos un vistazo más de cerca a nuestra demostración.
Creación del 1er bloque.
Capa 1
#capa1 (
antecedentes:#707070;
color:#fff;
posición: relativa;
ancho: 800 px;
altura: 450 px;
}
Usando estilos, le damos a este bloque un posicionamiento relativo. Gracias a esto, podremos colocar bloques adicionales en su interior.
Creando el segundo bloque
Por analogía con el primer bloque, creamos un bloque. Este bloque se diferencia únicamente por su identificador (id="layer2").
Capa 2
Lorem Ipsum es simplemente texto de relleno de la impresión y composición tipográfica.
industria. Lorem Ipsum ha sido el texto de relleno estándar de la industria
desde el siglo XVI, cuando un impresor desconocido tomó una galería de tipos
y lo revolví para hacer un libro tipo muestra. no ha sobrevivido
sólo cinco siglos, sino también el salto a la tipografía electrónica,
permaneciendo esencialmente sin cambios. Se popularizó en la década de 1960.
con el lanzamiento de hojas de Letraset que contienen pasajes de Lorem Ipsum,
y más recientemente con software de autoedición como Aldus
PageMaker que incluye versiones de Lorem Ipsum.
#capa2 (
antecedentes:#f9ad81;
color:#fff;
posición:absoluta;
arriba: 40px;
izquierda: 50px;
ancho: 400 px;
altura: 400 px;
índice z: 1;
}
Le damos al segundo bloque posicionamiento absoluto. Ahora definitivamente estará dentro del primero y no irá a ninguna parte. Además, definimos el atributo de índice z (=1). Esto significa que el bloque N° 2 estará ubicado encima del primero.
Creación del tercer bloque.
Capa 3
Lorem Ipsum es simplemente texto de relleno de la impresión y composición tipográfica.
industria. Lorem Ipsum ha sido el texto de relleno estándar de la industria
desde el siglo XVI, cuando un impresor desconocido tomó una galería de tipos
y lo revolví para hacer un libro tipo muestra. no ha sobrevivido
sólo cinco siglos, sino también el salto a la tipografía electrónica,
permaneciendo esencialmente sin cambios. Se popularizó en la década de 1960.
con el lanzamiento de hojas de Letraset que contienen pasajes de Lorem Ipsum,
y más recientemente con software de autoedición como Aldus
PageMaker que incluye versiones de Lorem Ipsum.
#capa3 (
fondo:#6dcff6;
color:#fff;
posición:absoluta;
arriba: 80px;
izquierda: 100px;
ancho: 600 px;
altura: 200 px;
índice z: 2;
}
En este bloque índice z = 2.
Puede intentar intercambiar los índices de bloque y ver el resultado.
Recuerde que un elemento con un índice z más bajo siempre estará debajo de un elemento con uno más alto. Es decir, puede darle al bloque número 1 un índice = 999 y al bloque número 2 - 1000. El resultado será el mismo.
¡Eso es todo por hoy! ¡Gracias por su atención!
El problema con el índice z es que muchas personas simplemente no entienden cómo funciona.
Todo lo que se describe a continuación está en la especificación W3C. Lamentablemente no todo el mundo lo lee.
Descripción del problema:
Entonces, digamos que tenemos un código HTML que consta de 3 elementos.Cada uno de ellos contiene uno dentro de sí. Y cada uno, a su vez, tiene su propio fondo: rojo, verde y azul, respectivamente. Además, cada uno está colocado absolutamente en el borde superior izquierdo del documento de tal manera que se superpone ligeramente al que está al lado. El primero tiene un índice z igual a 1, los otros dos no tienen ningún índice z establecido.
A continuación se muestra el código HTML con diseño CSS básico.
.red, .green, .blue ( posición: absoluta; ) .red ( fondo: rojo; índice z: 1; ) .green ( fondo: verde; ) .blue ( fondo: azul; )
Ejemplo en jsfiddle
Tarea: asegúrese de que el rojo esté detrás del azul y el verde, sin violar ninguna de las siguientes reglas:
- No puedes cambiar el marcado HTML
- No se puede cambiar/agregar índice z a los elementos
- No se puede cambiar/agregar posicionamiento a los elementos.
Solución:
La solución es agregar un poco menos de una transparencia a la primera (la madre del rojo).Aquí está el CSS que ilustra esto:
div:primer hijo (opacidad: .99;)
Mmmm, algo anda mal aquí. ¿Qué tiene que ver la transparencia con esto? ¿Cómo puede influir en el orden de los elementos superpuestos? ¿Piensas lo mismo? ¡Bienvenido al club!
Espero que en la segunda parte del artículo todo encaje.
El orden de los elementos superpuestos:
El índice Z parece muy simple: cuanto mayor sea el valor, más cerca estará el elemento de nosotros, es decir un elemento con índice z 5 se superpondrá a un elemento con índice z 2, ¿verdad? No precisamente.Este es el problema del índice z. Todo parece tan obvio que la mayoría de los desarrolladores no dedican suficiente tiempo a estudiar este tema.
Cualquier elemento en documento HTML puede estar en primer plano o en segundo plano. Todo el mundo lo sabe. Las reglas que definen este orden están claramente descritas en la especificación, pero, como dije anteriormente, no todos las entienden completamente.
Si el índice z y las propiedades de posicionamiento no se establecen explícitamente, todo es simple: el orden de apilamiento es igual al orden de los elementos en el HTML. (En realidad, es un poco más complicado que eso, pero siempre que no utilice valores de relleno negativos para superponer elementos en línea, no se encontrará con casos extremos)
Si especifica explícitamente el posicionamiento de los elementos (y sus hijos), dichos elementos se superpondrán a elementos sin una propiedad de posicionamiento explícita. (Cuando digo "indicar explícitamente el posicionamiento", me refiero a cualquier valor que no sea estático, por ejemplo: absoluto o relativo).
Y finalmente, el caso en el que se da el índice z. Para empezar, es natural suponer que los elementos con un índice z grande estarán por encima de los elementos con un índice z más pequeño, y cualquier elemento con un conjunto de índices z estará por encima de un elemento sin un conjunto de índices z, pero esto no es el caso. En primer lugar, el índice z sólo se tiene en cuenta en elementos posicionados explícitamente. Si intenta establecer el índice z en un elemento no posicionado, no sucederá nada. En segundo lugar, los valores del índice z pueden crear contextos superpuestos. Hmm, las cosas se pusieron mucho más complicadas, ¿no?
Contexto de superposición
Los elementos con padres comunes que pasan juntos al primer plano o al fondo se conocen como contexto superpuesto. Comprender el contexto de apilamiento es clave para comprender el índice z y el orden de apilamiento de los elementos.Cada contexto de superposición tiene su propio elemento raíz en estructura HTML. En el momento en que se forma un nuevo contexto en un elemento, todos los elementos secundarios también entran en este contexto y ocupan su lugar en el orden de superposición. Si un elemento se coloca en la parte inferior de un contexto de superposición, no hay manera de que pueda mostrarse encima de otro elemento en un contexto de superposición adyacente más arriba en la jerarquía, incluso con un índice z establecido en un millón.
Se puede formar un nuevo contexto en los siguientes casos:
- Si el elemento es el elemento raíz del documento (elemento)
Si el elemento no está colocado estáticamente y su valor de índice z no es automático
Si el elemento tiene opacidad menor a 1