Hi Im trying to overlay a pdf, rendered using adobe-reader plugin for IE11, with a div. Here is a jsfiddle describing my problem. The div is positioned behind the embedded pdf for some reason. Is there a solution to this problem? The problem occours in IE11.
The pdf is embedded like this with the div below it
<object id="pdf">
<embed src="http://www.education.gov.yk.ca/pdf/pdf-test.pdf"/>
</object>
<div id="overlay" />
Here os the css:
#overlay {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
background-color: red;
z-index: 1000;
}
#pdf {
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
Thanks for your help.
Update! I managed to make the div overlay the pdf using an iframe. But I can't make the div transparent.
<iframe style="position:absolute; left:0; top:0; width:150px;
height:150px; background-color:blue; z-index:9;" src="http://www.education.gov.yk.ca/pdf/pdf-test.pdf"></iframe>
<div id="overlay" style="position:absolute; left:0; top:0; width:150px;
height:150px; background-color:blue; z-index:10;"></div>
<iframe ALLOWTRANSPARENCY="true" style="position:absolute; left:0; top:0; width:50px; opacity: 0.0;
height:150px; z-index:9;"
srcdoc="<html><body style='background-color:transparent;'></body></html>"></iframe>
css remains the same.
A new js fiddle can be foudn here
