z-index does not work in Internet Explorer with pdf in iframe

Question

I cannot get z-index working on a iframe that contains a pdf file with IE8. It works with Google Chrome.

Example (JSFiddle):

Answer 1

The workaround with the additional IFRAME does work in simple cases but I have spent a morning trying to get the overlay to respect transparency. Basically our application has modal popups whereby a full-window overlay behind the popups is rendered 'greyed out' (background colour black, opacity 0.25) to indicate to the user that the pop-ups are modal. With the workaround, the embedded PDF view never gets greyed out with the rest of the window so still looks 'active' and indeed you can still interact with the PDF viewer.

Our solution is to use Mozilla's pdf.js library: https://github.com/mozilla/pdf.js/ - embedding an IFRAME pointing at the test URL http://mozilla.github.com/pdf.js/web/viewer.html?file=compressed.tracemonkey-pldi-09.pdf works straight out of the box respecting z-index, transparency, the lot, no hacks required! Seems that they use their own rendering engine which generates standard HTML representing the content of the PDF.