title: Iframe scrolls over the fixed header in IE 11 , how to make it scroll under/behind the header?
body: <p>In my html page, I have a header and its position is fixed. In the contant or body of the page I have an Iframe to display a youtube video and other DIV tabs. In other browsers like chrome, Morzilla etc all the contants schrolls behind the header and works fine!!.</p>
  
  <p>But In IE (IE 11), only the youtube video in Iframe scrolls over/aboves the header. How can I make it to scroll behind the header in IE.</p>
  
  <p>here is the code</p>
  
  <p>css</p>
  
  <p><code>#header  {
      position: fixed;
      background-color: #ffffff;
      margin-top: -18px;
      z-index: 10;
      width: 100%;
      }
      iframe {
      background-color:transparent !important;
      z-index: -1; 
      }
  </code> </p>
  
  <p>html (php page)</p>
  
  <pre><code>&lt;div style="text-align:center;padding:20px;font-size:16px ; z-index: -1;"&gt;
   &lt;div&gt;
          &lt;iframe  " width="320" height="247" src="http://www.youtube.com/********" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;
              &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/Rq25Q/" rel="nofollow">http://jsfiddle.net/Rq25Q/</a></p>