Pourquoi z-index ne fonctionne-t-il pas lors du positionnement d'éléments sur un PDF dans une iframe dans Internet Explorer ?

z-index Problème avec PDF dans iframe dans Internet Explorer

Malgré la facilité d'utilisation de z-index pour contrôler l'ordre d'empilement du HTML éléments, il peut parfois rencontrer des problèmes dans certains navigateurs. Un de ces problèmes survient dans Internet Explorer lorsque vous tentez de positionner un élément sur une iframe contenant un fichier PDF.

Éléments avec ou sans fenêtre dans IE

Pour comprendre ce problème , il est essentiel de savoir comment Internet Explorer catégorise les éléments HTML. Il les classe en deux types :

• Éléments sans fenêtre : Les éléments comme div et input sont sans fenêtre, rendus par le navigateur dans un seul plan MSHTML et adhérant à l'ordre z-index. .
• Éléments fenêtrés : Les éléments tels que les contrôles de sélection et ActiveX sont rendus en dehors de MSHTML et existent dans un plan séparé qui est peint sur les éléments sans fenêtre, quel que soit le z-index.

Exception Iframe dans IE

Historiquement, les iframes étaient des éléments fenêtrés, mais cela a changé dans IE 5.5. Bien qu'elles soient désormais sans fenêtre, les iframes conservent toujours le comportement de dessin sur des éléments fenêtrés avec un z-index inférieur pour une compatibilité ascendante.

Résolution du problème de l'index z

Dans le Cas spécifique d'un PDF dans une iframe, le PDF sera toujours rendu au-dessus du contenu normal de la page en raison de sa nature fenêtrée. Pour résoudre ce problème, une iframe supplémentaire doit être positionnée entre le contenu de la page et l'iframe PDF. Cette iframe supplémentaire agit comme une « couverture » et garantit que les éléments sans fenêtre peuvent être positionnés sur le PDF.

Exemple de code

Voici un exemple de code révisé qui démontre la solution :

<code class="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></code>

<code class="css">#outer {
    ...
    z-index: 2;
}

.cover {
    ...
    z-index: -1;
}

#pdf {
    ...
    z-index: 1;
}</code>

Conclusion

En utilisant une iframe "couverture" supplémentaire, il est possible de forcer des éléments à apparaître sur un PDF dans une iframe sur Internet Explorer, même si le z-index semble inefficace au départ. Cette solution de contournement fournit une solution à un comportement spécifique d'Internet Explorer et garantit que l'ordre d'empilement prévu est maintenu.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!