Cómo arreglar el Z-Índice de Opacidad en IE

El índice z de un elemento define cuán alto o bajo se encuentra en una pila de elementos de la capa. Junto con la opacidad, esto le da la opción de apilar elementos y hacer que los elementos superiores semitransparente. IE 7 o usuarios anteriores han encontrado errores con elementos utilizando el atributo z-index no fueron capas adecuadamente: la otra capa que se suponía iba a estar en la cima aparecía en la parte inferior. Esto sucedió porque el IE estaba comenzando el índice z "0", cuando el índice z debería haber incumplido en "auto". Este error se corrigió en Internet Explorer 8, que muestra las capas correctamente.

Instrucciones

1 Establecer una posición para su elemento. El índice z sólo funciona con los elementos posicionados. Hay cinco opciones para elementos posicionados: posiciones "estático" los elementos en el mismo orden en que aparecen en el documento; "Absoluto" se utiliza para establecer la posición absoluta desde la esquina de la página; "Fijo" es similar, excepto que se mueve con la ventana del navegador; "Relativa" se utiliza para mover el elemento con respecto a donde se colocaría si la posición se establece en "estático"; Por último, "Heredar" utiliza el estilo de posición para el elemento padre.

2 Definir el elemento que desee en la parte inferior con el más bajo índice z, tales como "-1" o "001" o incluso "1000." El número no es importante, excepto en cómo se relaciona con los otros números; el siguiente elemento en la pila tendría que ser "2", "002" o "2000" Por ejemplo, para colocar una imagen absolutamente en la esquina de la página, que se vería así:

<Img src = "http://www.yourdomain.com/yourimage.jpg&quot; style =" position: absolute; top: 0; izquierda: 0; z-index: 01; "/>

3 Utilice la propiedad "filtro" para hacer que el elemento superior semitransparente. La mayoría de los navegadores utilizan "opacidad" para hacer un elemento semi-transparente, pero esto no funciona para Internet Explorer a través de Internet Explorer 8. Para que un elemento transparente de CSS, también hay que añadir el atributo "filtro: alfa (opacidad = 100 ) ". Por ejemplo, si desea que un elemento DIV que 50 por ciento de transparencia sobre una imagen, añadir tanto "opacidad" y "filtro" de esta manera:

<Img src = "http://www.yourdomain.com/yourimage.jpg&quot; style =" position: absolute; top: 0; izquierda: 0; z-index: 01; "/>
<Div style = "opacidad: 0,5; filtro: alfa (opacidad = 50); position: absolute; top: 0; left: 0; z-index: 02;"> Contenido </ div>

4 Guarde el archivo y probarlo en Internet Explorer. Lo mejor es probar la página en varios navegadores, como Firefox, Chrome y Safari.

Consejos y advertencias

• "Estático" es la posición por defecto de un elemento si no se define una posición.
• La posición "Heredar" no se admite en Internet Explorer hasta el IE 8.