Je ne parviens pas à utiliser z-index sur un iframe contenant un fichier pdf avec IE8. Cela fonctionne avec Google Chrome.
Exemple ( 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; }
Mise à jour: Matthew Wise propose une solution alternative très intelligente que vous devriez prendre en compte, en particulier si vous rencontrez des difficultés avec mon approche ou si vous n’aimez pas les hacks laids!
Il y a un moyen de couvrir les éléments fenêtrés dans IE avec d’autres éléments, mais cela ne va pas vous plaire.
Legacy IE classe les éléments en deux types: fenêtré et sans fenêtre.
Les éléments réguliers comme div et input sont sans fenêtre . Ils sont rendus par le navigateur lui-même dans un seul plan MSHTML et respectent l’ordre z de l’autre.
Les éléments rendus en dehors de MSHTML sont fenêtrés . Par exemple, select (rendu par le système d’exploitation) et les contrôles ActiveX. Ils respectent l’ordre des uns des autres, mais occupent un plan MSHTML distinct qui est peint sur tous les éléments sans fenêtre.
La seule exception est iframe . Dans IE 5, iframe était un élément fenêtré. Cela a été changé dans IE 5.5 ; c’est maintenant un élément sans fenêtre, mais pour des raisons de rétrocompatibilité, il sera toujours dessiné sur des éléments avec un index z plus faible
En d’autres termes: iframe respecte z-index pour les éléments fenêtrés et sans fenêtre . Si vous placez un iframe sur un élément fenêtré, tous les éléments sans fenêtre positionnés sur l’ iframe seront visibles!
Le PDF sera toujours affiché au-dessus du contenu de la page habituelle – comme select éléments jusqu’à IE 7 . La solution consiste à iframe un autre iframe entre votre contenu et le PDF.
jsFiddle: http://jsfiddle.net/Jordan/gDuCE/
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; }
Cela a été testé et devrait fonctionner dans IE 7–9. Si vous ressentez de la persévérance à ce sujet dans le DOM pour d’autres navigateurs, vous pouvez l’append avec JavaScript ou l’encapsuler dans un commentaire conditionnel IE uniquement:
J’avais essayé de résoudre le même problème et mon scénario était similaire. J’essayais de rendre une vidéo sur YouTube sur ma page et en plus de la vidéo, je voulais placer des div avec des informations.
Mais la vidéo youtube contenue dans un iframe ne me permettait pas de le faire. Indépendamment de la
z-index que j’ai donné aux éléments.
Ensuite, cet article a aidé – https://stackoverflow.com/a/9074366/1484384
Fondamentalement, il s’agit du wmode . Vérifiez le message ci-dessus pour voir comment l’utiliser.
Voici un code de cet article:
Ou
// Correction de l’incorporation de vidéos youtube sur z-index
$(document).ready(function (){ $('iframe').each(function(){ var url = $(this).attr("src"); $(this).attr("src",url+"?wmode=transparent"); }); });
La solution de contournement avec l’IFRAME supplémentaire fonctionne dans des cas simples, mais j’ai passé une matinée à essayer d’obtenir la superposition pour respecter la transparence. Fondamentalement, notre application contient des fenêtres contextuelles modales dans lesquelles une superposition de fenêtres entières derrière les fenêtres contextuelles est rendue «grisée» (couleur de fond noire, opacité 0,25) pour indiquer à l’utilisateur que les fenêtres contextuelles sont modales. Avec la solution de contournement, la vue PDF incorporée ne devient jamais grisée avec le rest de la fenêtre, elle est donc toujours active et vous pouvez toujours interagir avec le visualiseur PDF.
Notre solution consiste à utiliser la bibliothèque pdf.js de Mozilla: https://github.com/mozilla/pdf.js/ – intégrer un IFRAME pointant sur l’URL de test http://mozilla.github.com/pdf.js/web/ viewer.html? file = compressed.tracemonkey-pldi-09.pdf fonctionne dès la sortie de la boîte en respectant z-index, transparence, le lot, pas de hacks requirejs! Il semble qu’ils utilisent leur propre moteur de rendu qui génère du code HTML standard représentant le contenu du PDF.