z-index ne fonctionne pas dans Internet Explorer avec les pdf dans un iframe

Mise à jour: Matthieu Sage a vraiment une astucieuse solution alternative dont vous devez tenir compte, surtout si vous avez de la difficulté avec ma démarche ou n'aiment pas laid hacks!

---

Il y a un moyen de couvrir fenêtré éléments c'est à dire avec d'autres éléments, mais vous n'allez pas aimer ça.

Contexte: en mode fenêtré et sans fenêtre éléments

Héritage IE catégorise les éléments en deux catégories: les fenêtré et sans fenêtre.

Régulière des éléments comme div et input sont sans fenêtre. Ils sont rendus par le navigateur lui-même dans un seul MSHTML avion et le respect des uns et des autres z-ordre.

Éléments rendus à l'extérieur de MSHTML sont fenêtré; par exemple, select (rendu par le système d'exploitation) et des contrôles ActiveX. Ils se respectent les uns les autres de l'ordre-z, mais qui occupent une distinct MSHTML avion qui est peint sur le dessus de tous les sans fenêtre éléments.

La seule exception est iframe. Dans IE 5, iframe était un fenêtré élément. C'était changé dans IE 5.5; c'est maintenant une fenêtre de l'élément, mais en arrière pour des raisons de compatibilité, il va encore tirer sur fenêtré éléments avec une baisse de z-index

En d'autres termes: iframe respecte z-index pour les deux fenêtré et sans fenêtre éléments. Si vous placez un iframe sur une fenêtre de l'élément, tout sans fenêtre des éléments positionnés sur les iframe sera visible!

Ce que cela signifie

Le PDF sera toujours peint sur la partie supérieure de la normale le contenu de la page—comme select éléments ont été jusqu'à IE 7. Le correctif est de la position de l'autre iframe entre votre contenu et le format PDF.

Démo

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

Code

HTML:

<div id="outer">
    <div id="inner">my text that should be on top</div>
    <iframe class="cover" src="about:blank"></iframe>
</div>

<iframe id="pdf" src="http://legallo1.free.fr/french/CV_JLG.pdf" width="200" height="200"></iframe>

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;
}

Soutien

Cela a été testé et doit travailler dans IE 7-9. Si vous vous sentez persnickety à ce sujet en montrant dans les DOM pour les autres navigateurs, vous pouvez l'ajouter avec du JavaScript ou de l'envelopper dans un IE seul commentaire conditionnel:

<!--[if IE]><iframe class="cover" src="about:blank"></iframe><![endif]-->

La solution de contournement avec l'IFRAME n'travail dans les cas simples, mais j'ai passé une matinée à essayer d'obtenir le recouvrement à l'égard de la transparence. Fondamentalement, notre application a modale des popups par lequel une pleine fenêtre de superposition derrière les fenêtres pop-up est rendu 'grisé' (couleur de fond noir, opacité 0.25) pour indiquer à l'utilisateur que les pop-ups sont modales. Avec la solution de contournement, le PDF intégré de vue n'est jamais estompée avec le reste de la fenêtre, de manière à toujours l'air "active" et en effet, vous pouvez toujours interagir avec la visionneuse de PDF.

Notre solution est d'utiliser Mozilla pdf.js bibliothèque: https://github.com/mozilla/pdf.js/ - l'incorporation d'une IFRAME pointant vers l'URL d'essai http://mozilla.github.com/pdf.js/web/viewer.html?file=compressed.tracemonkey-pldi-09.pdf fonctionne tout droit sorti de la boîte en respectant le z-index, la transparence, le lot, pas de hacks nécessaire! Semble qu'ils utilisent leur propre moteur de rendu qui génère du HTML standard qui représente le contenu du fichier PDF.