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中运行良好但在IE中运行良好，它忽略了z-index。

请帮我解决问题。

谢谢。

见截图：

在IE中

IN IE 8,9

和FF

IN FIREFOX

Answer 1

您需要在embed标记内将WMODE设置为Transparent。

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

Answer 2

试试这个你就像我一样得到解决方案并且在我的本地系统中工作正常:-)欢呼你的代码很少形成，但我相信你会得到它。

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>

HTML div不会成为`embed`对象的顶部 - IE

2 个答案: