2

How do I get the green div to overlap my DOCX or PDF IFrame in IE? Using z-indexes doesn't work.

<html>
<head>
<style>
html, body { 
    width: 100%; 
    height: 100%; 
}
#container {
    position: absolute;
    top: 25px;
    left: 50px;
    right: 50px;
    bottom: 25px;
    overflow: hidden;
    z-index: 1;
}
#overlap {
    background-color: green;
    position: absolute;
    height: 100%;
    width: 250px;
    overflow: hidden;
    right: 0;
    z-index: 10;
}
</style>
</head>
<body>
<div id="container">
    <iframe height="100%" width="100%" src="Test.docx"></iframe>    
</div>
<div id="overlap">
</div>
</body>
</html>
Sampson
  • 265,109
  • 74
  • 539
  • 565
Zach L
  • 1,277
  • 4
  • 18
  • 37
  • Firstly, you should define the iframe's height in the css, not HTML, and why not try removing
    and giving the iframe that ID instead?
     – Deep Dec 31 '14 at 16:45
  • Possible duplicate of http://stackoverflow.com/questions/9074365/youtube-video-embedded-via-iframe-ignoring-z-index – Deep Dec 31 '14 at 16:46
  • @Deep The duplicate appears to be for `YouTube` videos. I just put IDs on the DIVs for simplicity of styling – Zach L Dec 31 '14 at 17:05
  • Which version(s) of IE are you working with? – Sampson Dec 31 '14 at 17:08
  • @JonathanSampson currently IE11, but IE8+ (that I care for) all are having the same issue. – Zach L Dec 31 '14 at 17:11
  • 1
    @zLan I've added the IE 8 tag to identify it as your base requirement. – Sampson Dec 31 '14 at 17:13

0 Answers0