Mur*_*lai 22 html css pdf always-on-top
所以,我面临的问题是这样的:我有一个图层,它将被放置在页面上的pdf之上.PDF要么使用嵌入,要么使用iframe来包含它.但是,CSS样式不适用于PDF(因为它是一个插件？).因此,即使我把z-index:1000用于,该层仍然落后于PDF.任何想法如何解决这个问题？
这是代码:
<style type="text/css">
<!--#apDiv1 {
position:absolute;
left:543px;
top:16px;
width:206px;
height:223px;
z-index:1000;
background-color:#999999;
}
</style>
<body>
<!-- embed the pdf -->
<object data="test.pdf" type="application/pdf" width="600" height="500" style="z-index:1" wmode="opaque">
alt : <a href="test.pdf">test.pdf</a>
</object>
<!-- layer -->
<div id="apDiv1" >Whatever text or object here.</div>
</body>
小智 25
看了一些论坛后......(这里有些评论)
PDF由Acrobat Reader插件加载.它有点像它自己的东西,并且与任何HTML甚至浏览器无关(除了被浏览器加载).人们对Flash插件有同样的问题,而且没有解决方案.所以我想也没有解决方案.您最好的选择是重新设计菜单,以便它们不会进入pdf占用的空间.
如果它是一个插件,那么你就无法可靠地将其他元素放在它的顶部.当插件涉及时,浏览器通常会释放大部分"层"元素的能力.
没有直接支持在Api或Dom中覆盖'z-indexing'div.该插件加载了一个可执行文件,用一个非常简单的术语来打破浏览器窗口中的漏洞.使用'iframe shim'技术是标准的解决方法,尽管透明度可能很棘手.
我的解决方案:两个iframe,每个都在一个具有不同z-index的div中,当你点击黄色div时,显示空的iframe(在pdf iframe前面),这样你就可以看到pdf文档中的绿色div.
<html>
<head>
<script type="text/javascript">
function showHideElement(element){
var elem = document.getElementById(element);
if (elem.style.display=="none"){
elem.style.display="block"
}
else{
elem.style.display="none"
}
}
</script>
</head>
<body>
<div style="position:absolute;height:100px;width:100px;background-color:Yellow;" onclick="showHideElement('Iframe1');">click me</div>
<div style="position:absolute;z-index:100;background-color:Green;height:100px;width:100px;margin-left:200px;"></div>
<div style="position:absolute;z-index:20;margin-left:200px;">
<iframe visible="true" id="Iframe1" height="100" width="100" runat="server" frameborder="0" scrolling="auto" >
</iframe>
</div>
<div style="position:absolute;z-index:10;margin-left:100px;">
<iframe visible="true" id="ipdf" src="http://www.irs.gov/pub/irs-pdf/fw4.pdf" height="1000" width="1000" runat="server" frameborder="0" scrolling="auto" >
</iframe>
</div>
</body>
</html>
FernandoRodríguezfrodale@gmail.com