z-index non funziona in Internet Explorer con pdf in iframe

Non riesco a far funzionare z-index su un iframe che contiene un file pdf con IE8. Funziona con Google Chrome.

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

Aggiornamento: Matthew Wise ha una soluzione alternativa davvero intelligente che dovresti prendere in considerazione, specialmente se hai problemi con il mio approccio o non ti piacciono i brutti hack!


C’è un modo per coprire gli elementi con windows in IE con altri elementi, ma non ti piacerà.

Sfondo: elementi con windows e senza windows

Legacy IE suddivide gli elementi in due tipi: windowed e windowless.

Elementi regolari come div e input sono senza windows . Sono resi dal browser stesso in un singolo piano MSHTML e rispettano l’ordine z dell’altro.

Gli elementi resi all’esterno di MSHTML sono confinati ; ad esempio, select (reso dal sistema operativo) e controlli ActiveX. Rispettano l’ordine z degli altri, ma occupano un piano MSHTML separato che è dipinto su tutti gli elementi senza windows.

L’unica eccezione è l’ iframe . In IE 5, iframe era un elemento con finestra. Questo è stato cambiato in IE 5.5 ; ora è un elemento senza windows, ma per ragioni di compatibilità all’indietro continuerà a disegnare su elementi con finestra con uno z-index più basso

In altre parole: iframe rispetta lo z-index sia per gli elementi con windows che per quelli senza windows . Se posizioni un iframe su un elemento con finestra, tutti gli elementi senza windows posizionati sopra l’ iframe saranno visibili!

Cosa significa

Il PDF verrà sempre dipinto in cima al normale contenuto della pagina, come gli elementi select fino a IE 7 . La soluzione è posizionare un altro iframe tra il tuo contenuto e il PDF.

dimostrazione

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

Codice

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

Supporto

Questo è stato testato e dovrebbe funzionare in IE 7-9. Se ti senti persuaso a farlo apparire nel DOM per altri browser, puoi aggiungerlo con JavaScript o includerlo in un commento condizionale IE-only:

  

Stavo cercando di risolvere lo stesso problema e il mio scenario era simile. Stavo cercando di rendere un video di YouTube sulla mia pagina e in cima al video volevo inserire qualche div con alcune informazioni.

Ma il video di YouTube contenuto in un iframe non mi permetteva di farlo. Indipendentemente dal
z-index che ho dato agli elementi.

Quindi questo post ha aiutato – https://stackoverflow.com/a/9074366/1484384

Fondamentalmente è relativo al wmode . Controlla il post precedente per vedere come lavorarci.

Ecco un codice da quel post:

  

O

// Correzione dell’inclusione video di youtube con z-index

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

La soluzione alternativa con IFRAME aggiuntivo funziona in casi semplici, ma ho trascorso una mattinata cercando di ottenere che l’overlay rispetti la trasparenza. Fondamentalmente la nostra applicazione ha popup modali per cui una sovrapposizione a finestra piena dietro i popup è resa “grigia” (colore di sfondo nero, opacità 0,25) per indicare all’utente che i pop-up sono modali. Con la soluzione alternativa, la vista PDF incorporata non viene mai distriggersta con il resto della finestra, quindi sembra ancora ‘triggers’ e in effetti è ancora ansible interagire con il visualizzatore PDF.

La nostra soluzione è utilizzare la libreria pdf.js di Mozilla: https://github.com/mozilla/pdf.js/ – incorporare un IFRAME che punta all’URL di test http://mozilla.github.com/pdf.js/web/ viewer.html? file = compressed.tracemonkey-pldi-09.pdf funziona subito fuori dagli schemi rispettando z-index, trasparenza, molto, nessun hack richiesto! Sembra che utilizzino il proprio motore di rendering che genera HTML standard che rappresenta il contenuto del PDF.