2011-07-23 13 views
22

Estoy intentando rastrear un problema de índice z. Estoy mirando la página en el Inspector DOM de IE9, y no puedo entenderlo.¿Hay alguna manera de ver el contexto de apilamiento en IE/Firefox/Chrome/etc.?

Tengo un elemento con un índice z de 10000 y otro con un índice z de 7000, y sin embargo, el z-index 10000 dibuja debajo del z-index 7000. Claramente en algún lugar de la jerarquía, algo es estableciendo un contexto de apilamiento, pero he estado navegando arriba y abajo de la jerarquía y no he podido encontrarlo.

Nada más que estos dos elementos, por lo que puedo ver, tiene un conjunto de índice z. Y nada como un valor de opacidad establecido. y estoy viendo esto en FF5 e IE9, así que no es el viejo IE < 7 error de contexto de apilamiento.

¿Alguno de los navegadores tiene una herramienta que me dirá qué elemento está configurando un contexto de apilamiento?

Gracias.

+0

Ha intentado FireBug? – TMS

+0

Sí. Puedo explorar el árbol DOM en él, e identificar qué elementos tienen z-index establecido. Pero mi problema parece ser que algo está creando un contexto de apilamiento, sin tener un conjunto z-index, y no veo nada en Firebug que me ayude a encontrarlo. –

+5

También me interesaría una respuesta a esta pregunta para cromo – terrinecold

Respuesta

4

Si utiliza Chrome https://github.com/gwwar/z-context es una simple extensión para ver:

  • Si el elemento actual crea un contexto de pila, y por qué
  • ¿Cuál su contexto de pila de los padres es
  • El valor del índice Z

e importante, como aprohl5 dijo: La propiedad z-index puede afectar el orden de apilamiento sólo si la posición se establece explícitamente en fijo, absoluto o relativo.

Esta es una buena manera de MANTENER orden con Sass https://www.smashingmagazine.com/2014/06/sassy-z-index-management-for-complex-layouts/

-2

Para que el índice z funcione, debe establecer explícitamente la posición como fija, absoluta o relativa.

Aquí hay una gran explicación: http://coding.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/

+2

esto no responde a la pregunta sobre cómo saber qué elemento se está utilizando como contexto de apilamiento – terrinecold

+0

Lo que hace es dar una posible solución a la problema. Tal vez el Sr. Dege no estaba consciente de que debe establecer la posición para que el índice Z funcione. – aprohl5

-1

en las últimas versiones de Firefox tiene 3D view pulsando Ctrl + Shift + entonces clic en el icono de la caja 3D o 3D usar

+0

Parece que no muestra los contextos de apilamiento, por lo que no es realmente útil. – TiGR

+2

Desde Firefox 47 en adelante, la vista 3D ya no está disponible. – primavera133

Cuestiones relacionadas