Z-Index ¿Relativo o Absoluto?

Estoy tratando de encontrar una respuesta a la siguiente pregunta:

¿Es el estilo de índice Z de un elemento su orden de stack absoluta o su orden de stack en relación con su elemento primario?

Por ejemplo, supongamos que tengo el siguiente código:

Hello World
I Dominate!

¿Cuál estará al frente – #dHello, o #dDomination?

Eso es solo por ejemplos. Intenté esto en varios lugares y los resultados parecen variar. Estoy viendo si alguien sabe de una fuente autorizada para resolver:

1) ¿Cuáles son los estándares reales con respecto al índice z (específicamente sobre este tema)? 2) ¿Cómo varían los navegadores individuales en su implementación real de esto?

¡Gracias!

z-index es relativo. Vea esta respuesta detallada , que escribí para una pregunta similar.

Si ninguno de los otros elementos tiene un z-index definido, usar z-index: 1 estará bien.

Modelo: ¿Cómo se determina el índice Z?

  z-index 
Auto 1
Auto 1.1
Manual 1
Auto 1.1.2
Auto 1.2
Auto 2

Primero, se atraviesan los nódulos directos del cuerpo del niño. Se encuentran dos elementos: #A y #F. A estos se les asigna un índice z de 1 y 2. Este paso se repite para cada elemento (hijo) en el documento.

Luego, se verifican las propiedades de z-index configuradas manualmente. Si dos valores del z-index son iguales, se compara su posición en el árbol del documento.

Tu caso:

 
Z-index 1
Z-index 3
Z-index 2

Esperaría que # Y se superponga a #Z, porque un z-index de 3 es claramente superior a 2. Bueno, está equivocado: #Y es hijo de #X, con un z-index de 1. Dos es más alto que uno, y así, #Z se mostrará sobre #X (y # Y).

Aquí hay un plunker para visualizar esto un poco mejor: http://plnkr.co/edit/CCO4W0NS3XTPsVL9Bqgs?p=preview

Afaik, z-index no funciona a menos que ese elemento se establezca en position: relative; Si ese mismo elemento tuvo un hijo con position: relative; y el z-index se estableció más alto, el niño se mostraría encima de su padre.

Por lo tanto, tiene elementos de orden de astackmiento “absoluto” y “relativo” a medida que lo redactó.

Todos los navegadores prácticamente lo manejan igual, creo.

Aquí está la especificación W3C para z-index .

Creo que la línea más importante, basada en su pregunta es la siguiente:

El orden en que se representa el árbol de representación en el canvas se describe en términos de contextos de astackmiento. Los contextos de astackmiento pueden contener más contextos de astackmiento. Un contexto de astackmiento es atómico desde el punto de vista de su contexto de astackmiento parental; las cajas en otros contextos de astackmiento pueden no aparecer entre ninguno de sus cuadros.

Esto parece indicar que no se puede dibujar nada entre el div con z-index: -100 y el div con z-index: 200 .

Por ejemplo:

        
this class is relative
this class is fixed
x3: this class is relative
x4: this class is relative
x5: this class is relative
x6: this class is relative
x3: this class is relative