title: Unable to place a div over iframe in IE
body: <p>I am placing divs and iframes using position <code>relative</code> &amp; <code>absolute</code> which is working fine on chrome but its not working in IE. I am using <code>Foxit Reader</code> in IE to show the pdf files.</p>
  
  <p><strong>Chrome</strong> (Test 1231 23123 is visible)
  <a href="https://i.stack.imgur.com/scLfo.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/scLfo.jpg" alt="chrome"></a></p>
  
  <p><strong>IE 11</strong> (Test 1231 23123 is behind the iframe)</p>
  
  <p><a href="https://i.stack.imgur.com/JlzAV.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JlzAV.jpg" alt="enter image description here"></a></p>
  
  <p>Below is my html:</p>
  
  <pre><code> &lt;div class="document-previewer-container"&gt;
   &lt;div class="document-preview"&gt;
      &lt;div class="document-container"&gt;
          &lt;iframe id="pdf-container" ng-attr-src="{{vm.selectedDoc.pdfpath`}}"&gt;&lt;/iframe&gt;
      &lt;/div&gt;
      &lt;div class="doc-overlay"&gt;
          &lt;p&gt;Test 1231 23123&lt;/p&gt;
      &lt;/div&gt;
   &lt;/div&gt;
   &lt;div class="documents-carousel-wrapper"&gt;
      &lt;!-- something --&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>my <code>.less</code> file:</p>
  
  <p>@import '../../styles/light-theme-definitions.less';</p>
  
  <pre><code>div.document-previewer-container {
  //height: 400px;
  //width: 300px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  //padding: 5px 2px;
  &gt; div.document-preview {
      height: 88%;
      //width: 100%;
      position: relative;
  
      .document-container{
          height: 100%;
          width: 100%;
          position: relative;
      }
      .doc-overlay {
          width: 95%;
          height: 95%;
          position: absolute;
          cursor: pointer;
          top: 0;
  
          p {
              padding: 2px;
          }
      }
  }
  
  &gt; div.documents-carousel-wrapper {
      position: relative;
      overflow: hidden;
      height: 12%;
      min-height: 63px;
  
      img {
          width: 100%;
          height: 100%;
      }
  }
  </code></pre>
  
  <h2>Update: 1</h2>
  
  <p>Working <a href="https://plnkr.co/edit/Nyxc9KdAJCWLTKFjMjXo?p=preview" rel="nofollow noreferrer">PLUNKER. Please open it with IE or save it on ur local disk and open it with IE</a></p>
  
  <h2>Update: 2</h2>
  
  <p>I implemented the logic but still the div is not coming over pdf <code>iframe</code>. Please try clicking anywhere on <a href="https://plnkr.co/edit/YskcRqsVFPhD1Ac2A8yO?p=preview" rel="nofollow noreferrer">Plunker</a>.</p>
  
  <p>Actually, I want the <code>doc-overlay</code> to be clickable in real life project. As u'll observe, the click event (using ng-click) is not working over PDF. Please refer the <em>inspect element</em> screenshot for more clarity. <a href="http://i66.tinypic.com/28uh9nm.jpg" rel="nofollow noreferrer">IE</a> &amp; <a href="http://i63.tinypic.com/2ppm3hs.jpg" rel="nofollow noreferrer">Chrome</a>. checkout the blue area too see the difference </p>