z-index no funciona en Internet Explorer con pdf en iframe

No puedo hacer que z-index funcione en un iframe que contiene un archivo pdf con IE8. Funciona con Google Chrome.

Ejemplo ( JSFiddle ):

HTML

 
my text that should be on top

CSS

 #div-text{ position:relative; left:210px; top:20px } #shouldBeOnTop{ position:relative; right:60px; background-color:red; width:100px; z-index:2; } #div-frame{ position:relative; z-index:1; } 

Actualización: Matthew Wise tiene una solución alternativa muy inteligente que debes considerar, especialmente si tienes problemas con mi aproximación o te gustan los hacks feos.


Hay una manera de cubrir los elementos de ventana en IE con otros elementos, pero no te va a gustar.

Fondo: elementos con ventanas y sin ventanas

Legacy IE clasifica los elementos en dos tipos: windowed y windowless.

Los elementos regulares como div y input tienen ventanas . Son renderizados por el navegador en un solo plano MSHTML y respetan el orden Z de cada uno.

Los elementos representados fuera de MSHTML son ventanas ; por ejemplo, select (representado por el sistema operativo) y controles ActiveX. Respetan el orden z de cada uno, pero ocupan un plano MSHTML separado que está pintado sobre todos los elementos sin ventanas.

La única excepción es iframe . En IE 5, iframe era un elemento de ventana. Esto fue cambiado en IE 5.5 ; ahora es un elemento sin ventanas, pero por razones de compatibilidad con versiones anteriores aún se dibujará sobre elementos en ventanas con un índice Z más bajo

En otras palabras: iframe respeta el índice z para elementos con ventana y sin ventana . Si coloca un iframe sobre un elemento de ventana, ¡todos los elementos sin ventana colocados sobre el iframe estarán visibles!

Lo que esto significa

El PDF siempre estará pintado sobre el contenido de la página normal, como elementos select hasta IE 7 . La solución es colocar otro iframe entre su contenido y el PDF.

Manifestación

jsFiddle: http://jsfiddle.net/Jordan/gDuCE/

Código

HTML:

 
my text that should be on top

CSS :

 #outer { position: relative; left: 150px; top: 20px; width: 100px; z-index: 2; } #inner { background: red; } .cover { border: none; position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: -1; } #pdf { position: relative; z-index: 1; } 

Apoyo

Esto ha sido probado y debería funcionar en IE 7-9. Si le parece persistente que aparezca en DOM para otros navegadores, puede agregarlo con JavaScript o envolverlo en un comentario condicional solo de IE:

  

He estado tratando de arreglar el mismo problema y mi escenario era similar. Estaba tratando de renderizar un video de youtube en mi página y en la parte superior del video quería colocar algún div con información.

Pero el video de youtube contenido en un iframe no me dejaba hacerlo. Independientemente de la
z-index que di a los elementos.

Entonces esta publicación ayudó – https://stackoverflow.com/a/9074366/1484384

Básicamente se trata de la wmode . Consulte la publicación anterior para ver cómo trabajar con ella.

Aquí hay un código de esa publicación:

  

O

// Corregir incrustación de video de youtube z-index

 $(document).ready(function (){ $('iframe').each(function(){ var url = $(this).attr("src"); $(this).attr("src",url+"?wmode=transparent"); }); }); 

La solución con el IFRAME adicional funciona en casos simples, pero he pasado una mañana tratando de que la superposición respete la transparencia. Básicamente, nuestra aplicación tiene ventanas emergentes modales mediante las cuales una superposición de ventana completa detrás de las ventanas emergentes se muestra ‘en gris’ (color de fondo negro, opacidad 0,25) para indicar al usuario que las ventanas emergentes son modales. Con la solución alternativa, la vista de PDF incrustado nunca se atenúa con el rest de la ventana, por lo que aún se ve “activa” y, de hecho, puede interactuar con el visor de PDF.

Nuestra solución es utilizar la biblioteca pdf.js de Mozilla: https://github.com/mozilla/pdf.js/ – incrustación de un IFRAME que apunta a la URL de prueba http://mozilla.github.com/pdf.js/web/ viewer.html? file = compressed.tracemonkey-pldi-09.pdf funciona directamente de la caja respetando z-index, transparencia, el lote, ¡no se requieren hacks! Parece que usan su propio motor de representación que genera HTML estándar que representa el contenido del PDF.