Todo sobre .... Z-Index?

Question

Esta propiedad me hace confundir.

bien .. He buscado en Google:

¿Cuál es el índice z?

La propiedad z-index especifica el orden de la pila de un elemento. Un elemento con mayor orden de apilamiento está siempre delante de un elemento con un orden de apilamiento inferior. Nota: el índice Z solo funciona en elementos posicionados (posición: absoluta, posición: relativa, o posición: fija).Answer Source

¿Qué es el índice z?

El orden en que los elementos se superponen entre sí. Para ese propósito, puede asignarle a cada elemento un número (índice Z). El sistema es que un elemento con un número más alto se superpone a un elemento con un número menor.Answer Source

Ok ahora entiendo, es organizar los elementos y podemos usar cualquier número ... aparece el número z-index más alto en toda buena elements..ok.

z-index and jquery ..muy sencilla y muy agradable

... pero me di cuenta de las respuestas que dependen de propiedad de posición, por lo que -> ... (Google) ..

Lo Cuál es la relación entre el índice Z y la posición?

demo--> >>source

Ok ... así z-index y posición se couple..must estar juntos ..

necesita más información ::

dosis se hace ninguna conflictos en los navegadores (IE7, IE8, Chrome, ... etc.)

¿Cuáles son los usos del índice Z o qué podemos hacer con el índice z (dependiendo de las etiquetas)?

... etc?

corregir si me entiendo mal ...

Gracias de antemano.

Answer 1

Z-index es la propiedad que determina qué elemento html aparece encima de otro elemento html cuando se superponen. La idea básica es que el elemento con el índice z más alto está "arriba".

De forma predeterminada, los elementos tienen un índice Z de cero, pero establecer la propiedad css en un elemento en 1 y otro en 5 hará que este último elemento esté "encima" del anterior, si se superponen.

Hasta ahora, tan simple, pero hay varias cosas a tener en cuenta.

Uno, como ya se mencionó en otra respuesta, es que el índice Z solo tiene un efecto si el elemento se coloca con la posición absoluta, fija o relativa. (es decir, la "posición" de la propiedad css). Un elemento sin posición tiene un índice Z de cero.

Para complicar aún más las cosas (y en mi experiencia el área que a menudo no se entiende) es el concepto del contexto de apilamiento. Se puede encontrar más información en artículos como this. Sin embargo, en resumen, cada vez que configura explícitamente un nuevo índice Z, comienza un nuevo contexto de apilamiento. Todos los elementos secundarios de aquel en el que se estableció el índice z se encuentran ahora en este nuevo contexto de declaración, que puede estar por encima o por debajo de un contexto de apilamiento en otro elemento no publicado.

¿Qué significa este contexto de apilamiento? Significa que un elemento con un índice z de 100 no es necesariamente superior a un elemento con un índice Z de 1. Si se encuentran en diferentes contextos de apilamiento, solo importa el índice z del contexto de apilamiento.

Answer 2

Yo sugeriría echar un vistazo a esta propiedad en SmashingMagzine.

The Z-Index CSS Property: A Comprehensive Look

Abarca todos los aspectos prácticos de esta propiedad con grandes ejemplos y demostraciones.

Answer 3

la cosa más importante a recordar es que z-index sólo funciona si el elemento tiene posición relativa, absoluta o fija

Answer 4

No estoy del todo seguro de lo que estás pidiendo, pero para la parte más solo Alguna vez necesita usar z-index si está haciendo un estilo complicado, por ejemplo, Desplace la información sobre herramientas o las navegaciones desplegables, simplemente para asegurarse de que se muestran sobre el contenido de otra página.

para el diseño básico en general usted debe ser evitar el uso de las propiedades de posición y z-index como normalmente se puede lograr los mismos efectos con un mejor rendimiento y compatibilidad del navegador con sólo flotadores etc.

El enlace Smashing Magazine Publicado por Sarfraz es un excelente artículo sobre el tema y un buen punto de referencia si todavía está luchando por comprender la funcionalidad de la propiedad.