Es posible que, dependiendo de los requisitos del diseño, necesitemos modificar los valores por defecto de la propiedad z-index de un elemento. Esta propiedad no tiene ninguna dificultad aparente, el valor indica la prioridad de mostrarse por encima o por debajo de otras capas -cuanto más alto el número más prioridad-.
Pues pasa que en el navegador Internet Explorer, nos podemos encontrar que las capas no hagan caso a esta propiedad, con lo que un estilo definido de la siguiente manera:
1 | #pie { margin-top: -130px; z-index: 10; } |
no haga caso. La solución (la mayoría de las veces), es incluir la propiedad position: relative al estilo para que funcione:
1 | #pie { margin-top: -130px; z-index: 10; position: relative;} |
7 comentarios
Pues va a ser que con z-index, con position:relative y con mil “mariconadas” pero en el IExplorer no funciona, unas capas por encima de otras, eso sí, las que no tocan.
A ver si cambian el Explorador de Microsoft porque lleva años tocando las pelotillas.
Pues a mi me funcionó a la perfección, muy buen TIP. saludos
A mi, aparentemente tampoco me funcionaba, pero puse valor -1 al z-index de la capa que queremos dejar al fondo y junto al position:relative funciona correcto en internetExplorer.
SAlud!
no se como es la cosa de fondo pero yo coloqué z-index: -0; position:absolute”> y me funcionó es decir en vez de position: relative coloquen absolute
mmm lo que yo estaba tratando de hacer era quizas mas complejo y no me funciono, pero si me funciono lo que dice Javiro, pensar a la inversa, en vez de tratar de posicionar una capa mas alto, posicione la otra mas bajo y me funciono de pelos en IE6 7 y 8.
saludos
yo estoy intentando poner un menu. al que pasar el raton porencima se cambie el z-index. Me funciona en mozilla chrome etc. en todos menos en IE. El problema es que estoy utilizando position:absolute y si le pongo position:relative se me desmadra todo. algun TIP??
Saludos buen tips, Gracias me funciono perfectamente.
hagamosle la guerra a IE, Recomendado otros navegadores.