html - HTML div 未到达“嵌入”对象的顶部 - IE

Question

我有以下 HTML

<embed class='pdf_container'  src='welcome.pdf' style ='width:100%;height:500px;' ></embed>

<div id="show_message"  class='message_wrapper' >

 <div id="message_content"> The requested operation ...  </div>

</div>

在 CSS 中

.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;
}

实际上我想展示它#show_message，.pdf_container它在 Firefox 中运行良好，但在 Firefox 中运行良好IE，它忽略了z-index.

请帮我找出问题所在。

谢谢你。

见截图：

在 IE 中

在 IE 8,9

在FF

在火狐中

Answer 1

试试这个，你会像我一样得到解决方案，并且它在我的本地系统中工作正常 :-) 干杯你的代码有点不同，但我相信你会得到它。

http://jsfiddle.net/fRsUv/

html { height:100% }

#container {
    position:relative;
    width:100%;
}

#pdf {
    width:100%;
    z-index:1;
}

#layer_over_pdf {
    width:200px;
    z-index:2;
}

#pdf, #layer_over_pdf {
    position:absolute;
    top:0;
    left:0;
}



<div id="container">
 <div id="pdf"><embed id="pdfEmbed" src="JavaScript_DHTML_Mat_V4.pdf" style="width:500px; height:600px" type="application/pdf"></embed></div> 
 <div id="layer_over_pdf">some content</div>
</div>

Answer 2

您需要在嵌入标签内将 WMODE 设置为透明。

<embed class='pdf_container'  src='welcome.pdf' style ='width:100%;height:500px;' wmode="transparent" ></embed>