propiedad - zoom css in firefox
IE 6 y IE 7 Z-Index Problema (7)
http://madisonlane.businesscatalyst.com
Intento que el signo de publicación div # se asiente sobre el div # bottom. Esto funciona bien en todos los navegadores excepto IE6 e IE7. ¿Alguien puede ver cuál es el problema aquí?
También IE6 muestra un 198px adicional a la parte superior de div # bottom.
Acabo de tener este problema y la solución que encontré (gracias a Quirksmode) fue darle al padre directo del nodo que está tratando de establecer un índice z de su propio índice z que está a menos del índice Z del nodo que intentas establecer Aquí hay 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>
Bienvenido, resolví el problema con:
.header {
position: relative;
z-index: 1001;
}
.content {
position: relative;
z-index: 1000;
}
De acuerdo con el comentario del validador: la validación por lo general ayuda. Pero, si no hay algunos indicadores para el índice z en IE:
1) los elementos cuyo índice Z estás manipulando deberían estar en el mismo nivel, es decir. deberías establecer el índice z de #bottom y #body
si esto no es factible, entonces
2) IE a veces no aplicará el índice z correctamente a menos que los elementos lo estén aplicando para tener una position:relative . Intente aplicar esa propiedad a #bottom y #body (o #signpost)
Dejame saber como funciona
Darko
La mayoría de las respuestas aquí son incorrectas; algo de trabajo, pero no por la razón que dicen. Aquí hay alguna explicación.
Así es como debería funcionar el índice z de acuerdo con la especificación :
- puedes dar un valor de
z-indexa cualquier elemento; si no lo hace, de forma predeterminada esauto - elementos posicionados (es decir, elementos con un atributo de
positiondiferente de lastaticpredeterminada) con unz-indexdiferente deautocrean un nuevo contexto de 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. - dentro del mismo contexto de apilamiento, se compara el nivel de pila de los elementos. Los elementos con un valor de
z-indexexplícito 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. (Se aplican reglas más complicadas si tienen un atributo depositiondiferente).
En otras palabras, cuando dos elementos tienen z-index conjunto z-index , para decidir cuál se mostrará en la parte superior, debe verificar si tienen algún elemento posicionado que también tenga un z-index establecido. 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 hijos es irrelevante.
Entonces, el z-index decide cómo se coloca el elemento en comparación con otros hijos de su "padre apilador" (el antecesor más cercano con un conjunto z-index y una position relative , absolute o fixed ), pero no importa al comparar a otros elementos; es el z-index del padre apilador (o posiblemente el z-index del padre apilador del padre apilador, etcétera) lo que cuenta. En un documento típico donde usa z-index solo en algunos elementos como menús desplegables y ventanas emergentes, ninguno de los cuales contiene el otro, el padre apilador de todos los elementos que tienen un z-index es el documento completo, y usted puede generalmente salirse con la suya pensando en el z-index como un pedido global a nivel de documento.
La diferencia fundamental con IE6 / 7 es que los elementos posicionados comienzan nuevos contextos de apilamiento, ya sea que tengan z-index configurado o no. Dado que los elementos a los que asignaría instintivamente los valores del z-index suelen estar absolutamente posicionados y tienen un padre o antecesor cercano relativamente posicionado, esto significará que sus elementos z-index no se compararán en absoluto, sino sus antepasados posicionados will - y dado que aquellos no tienen un conjunto z-index, prevalecerá el orden del documento.
Como solución, 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, puede recorrer los contenedores del menú o los elementos del menú principal y asignarles un z-index de 1000, 999, 998, etc. Otro método: cuando un menú emergente o desplegable se vuelve visible, busca todos sus antepasados relativamente posicionados y dales una clase on-top que tenga un índice Z muy alto; cuando se vuelve invisible de nuevo, elimina las clases.
Me parece que tiene algún código HTML mal formado. 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 tuve un problema continuo al mostrar una capa encima de otra. En mi caso, estaba creando programáticamente dos capas en Javascript, una para reproducir un control personalizado y otra para crear una capa de pantalla completa detrás de ella. FF estaba bien, pero IE mostraba la capa de pantalla completa siempre encima de todo lo demás.
Después de numerosas redes de arrastre en el interweb, intentando las sugerencias de todos, la única forma en que eventualmente lo logro funcionar fue eliminar la position: atributos de ambas capas y ajustar el atributo margin-top: hasta que obtuve un resultado satisfactorio.
Un poco de hash, pero funciona y todo estará bien hasta que IE 8 solucione todos los errores actuales ...
la única solución confiable es, poner los elementos superiores debajo en el código y luego empujarlos sobre el resto con un posicionamiento absoluto.
por ejemplo, Wordpress: coloque 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 comenzar directamente con el contenido, sin tener que rastrear primero el menú ...
ACTUALIZACIÓN: necesito corregirme a mí mismo. 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 debes asegurarte de que todos y cada uno de los elementos padres tengan algún tipo de posicionamiento y algún sentido z-index . Entonces, el índice Z debería funcionar nuevamente incluso en IE7.