http://madisonlane.businesscatalyst.comIE 6 y IE 7 Índice Z Problema
Estoy intentando conseguir el div # poste indicador para sentarse encima de la parte inferior div #. Esto funciona bien en todos los navegadores excepto IE6 & IE7. ¿Alguien puede ver cuál es el problema aquí?
también IE6 está mostrando un 198px adicional a la parte superior del div # inferior.
acuerdo con el comentario validador - validar por lo general ayuda. Pero, si no lo hace heres algunas sugerencias para z-index en IE:
1) elementos que Z-índice que está manipulando debe estar en el mismo nivel, es decir. usted debe estar fijándose el índice z de #bottom y #body
si esto no es posible entonces
2) IE veces suele aplicar el índice z correctamente a menos que los elementos ou están aplicando a tener un position:relative . Trate de aplicar esa propiedad a #bottom y #body (o #signpost)
que me haga saber cómo funciona cabo
Darko
Creo que esto se debe al conocido error corregido al agregar "posición: relativa" a la hoja de estilo. –
Este comportamiento se debe a que IE6/7 comienza un nuevo orden de apilamiento para cada elemento que tiene la posición: relativa. http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/ – hitautodestruct
Me parece que usted tiene algo de HTML con formato incorrecto en allí. Intenté contar, y quizás perdí la cuenta de las etiquetas de apertura y cierre, pero parece que el contenedor div # no está cerrado. Intente ejecutar su página a través de un validador (como el Validador HTML de W3C, o algo similar) y solucione algunos de los errores. Eso me ayudó con este tipo de problemas en el pasado. ¡Buena suerte!
recientemente he tenido un problema continuo que muestra una capa por encima de otro. En mi caso yo estaba creando dos capas mediante programación en JavaScript, uno para diaplaying un control personalizado y una para la creación de una capa de pantalla completa detrás de él. FF estaba bien, pero IE mostraba la capa de pantalla completa siempre encima de todo lo demás.
Después de numerosos arrastres en el interweb, intentando sugerencias de todos, la única forma en que eventualmente lo logro funcionar fue eliminar los atributos position: de ambas capas, y modificar el atributo margin-top: hasta que obtuve un resultado satisfactorio.
Un poco de un hash, pero funciona y no habrá ningún problema hasta que IE 8 clases a cabo todos los errores actuales ......
solo tuve este problema y la solución que encontré (gracias a Quirksmode) era dar a la matriz directa del nodo que está intentando establecer un índice z de su propio z-índice que esté a menos de la z-índice del nodo que se está tratando de establecer. Aquí está un ejemplo rápido que debería funcionar en IE6
<html>
<head>
<style type="text/css">
#AlwaysOnTop {
background-color: red;
color: white;
width: 300px;
position: fixed;
top: 0;
z-index: 2;
}
#Header {
color: white;
width: 100%;
text-align: center;
z-index: 1;
}
</style>
</head>
<body>
<div id="Header">
<div id="AlwaysOnTop">This will always be on top</div>
</div>
<div id="Content">Some long amount of text to produce a scroll bar</div>
</body>
</html>
Esto funciona porque coloca '# Header' más alto que' # Content' (que presumiblemente es un elemento posicionado). La relación entre el índice z de '# Header' y' # AlwaysOnTop' es irrelevante. Ver mi respuesta para más detalles. – Tgr
La mayoría de las respuestas aquí están equivocados; algo de trabajo, pero no por la razón que dicen. Aquí hay alguna explicación.
Esta es la forma en z-index debe trabajar de acuerdo a the spec:
z-index a cualquier elemento; si no lo hace, el valor predeterminado es autoposition atribuyen distinto del predeterminado static) con un z-index diferente de auto crear un contexto nuevo apilamiento. Los contextos de apilamiento son las "unidades" de superposición; un contexto de apilamiento está completamente por encima del otro (es decir, cada elemento de la primera está por encima de cualquier elemento de la segunda) o está completamente debajo de él.z-index tienen ese valor como un nivel de pila, otros elementos heredan de sus padres. El elemento con el nivel de pila más alto se muestra en la parte superior. Cuando dos elementos tienen el mismo nivel de pila, generalmente el que está más tarde en el árbol DOM está pintado en la parte superior. (Reglas más complicadas aplicar si tienen un atributo diferente position.)En otras palabras, cuando dos elementos tienen z-index conjunto, a fin de decidir que se mostrará en la parte superior, es necesario comprobar si tienen alguna posicionado padres que también tienen z-index conjunto. Si no lo hacen, o si los padres son comunes, gana el que tiene un mayor índice z. Si lo hacen, debe comparar a los padres, y el z-index de los niños es irrelevante.
Así que la z-index decide cómo se coloca el elemento de comparación con otros niños de su "padre" de apilamiento (el antepasado más cercano con un conjunto z-index y una position de relative, absolute o fixed), pero eso no importa cuando se comparan a otros elementos; es de los padres de apilamiento z-index (o posiblemente la z-index de matriz de apilamiento de los padres de apilamiento, etcétera) que cuenta. En un típico documento en el que utiliza z-index sólo en algunos elementos como los menús y ventanas emergentes desplegables, ninguno de los cuales contiene el otro, el padre de apilamiento de todos los elementos que tienen un z-index es todo el documento, y por lo general puede conseguir lejos con el pensamiento del z-index como un pedido global a nivel de documento.
La diferencia fundamental con IE6/7 es que los elementos posicionados iniciar nuevos contextos de apilamiento, si tienen z-index conjunto o no. Dado que los elementos que le instintivamente asignar valores a z-index suelen posición absoluta y tienen un padre en posición relativa o cercano antepasado, esto significará que sus elementos z-index -ed no se pueden comparar en absoluto, en lugar de sus antepasados posicionados hará - y desde aquellos que no tienen un conjunto z-index, prevalecerá el orden del documento.
Como solución alternativa, debe averiguar qué antepasados se comparan realmente y asignarles un índice z para restaurar el orden que desee (que generalmente será el orden inverso de los documentos). Por lo general, esto se hace mediante javascript - para un menú desplegable, se puede caminar a través de los contenedores de menú o elementos del menú principal, y asignarles un z-index de 1000, 999, 998 y así sucesivamente. Otro método: cuando un menú emergente o desplegable se vuelve visible, encuentre todos sus ancestros relativamente posicionados y asígneles una clase on-top que tenga un índice z muy alto; cuando se vuelve invisible de nuevo, elimina las clases.
¡Gracias por resolver un misterio para mí! :) He tenido este problema con el orden de elementos y cada vez siento que recurro a la magia negra para que funcione. –
Buena explicación. Es sorprendente la cantidad de gente que se equivoca cuando intentan explicar este error. – riwalk
Gracias por su explicación. Me ayudó a comprender y corregir este mismo error en un proyecto en el que estoy trabajando. – Julian
Bienvenido, me resolvió el problema:
.header {
position: relative;
z-index: 1001;
}
.content {
position: relative;
z-index: 1000;
}
la única solución fiable es, para poner los elementos principales más adelante en el código y luego empujarlos al las otras cosas con el posicionamiento absoluto.
p. Ej. Wordpress: puso la navegación en el archivo de pie de página, pero aún dentro del contenedor de la página.
también podría traer algunas ventajas para los motores de búsqueda, ya que pueden empezar directamente con el contenido, sin que se arrastra a través del menú de primera ...
ACTUALIZACIÓN: tengo que corregirme. Si bien colocar el elemento debajo y luego empujarlo sigue siendo la manera más fácil, hay ciertos casos en que esto no es posible en un tiempo razonable. Luego, , tiene que asegurarse de que todos y cada uno de los elementos principales tengan algún tipo de posicionamiento y algún sentido z-índice. Entonces, el índice Z debería funcionar nuevamente incluso en IE7.
Irónicamente funciona muy bien en IE8 – Chris