title: HTML div not coming to top of `embed` object - IE
body: <p>I have the following HTML </p>
  
  <pre><code>&lt;embed class='pdf_container'  src='welcome.pdf' style ='width:100%;height:500px;' &gt;&lt;/embed&gt;
  
  &lt;div id="show_message"  class='message_wrapper' &gt;
  
   &lt;div id="message_content"&gt; The requested operation ...  &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>and in CSS</p>
  
  <pre><code>.message_wrapper{
     position:fixed;
     z-index:1000;
     height:100px;
     width:100%;
     background:red;
     top:0;
     left:0;
  }
  .pdf_container{
    position:absolute;
    top:0;
    left:0;
    z-index:100;
  }
  </code></pre>
  
  <p>Actually i want to show the <code>#show_message</code> over the <code>.pdf_container</code> and it works well in Firefox but not in <code>IE</code> , it ignoring the <code>z-index</code>. </p>
  
  <p>Please help me to figure out the problem.</p>
  
  <p>Thank you.</p>
  
  <p>See Screenshots:</p>
  
  <p><strong>IN IE</strong></p>
  
  <p><a href="http://i49.tinypic.com/1twiyv.png" rel="nofollow">IN IE 8,9</a></p>
  
  <p><strong>and in FF</strong></p>
  
  <p><a href="http://i50.tinypic.com/2luouh4.png" rel="nofollow">IN FIREFOX</a></p>