< div>层在PDF之上 [英] <div> layer on top of PDF
问题描述
所以，我面对的问题是这样的：
我有一个图层，它将放在页面上的pdf的顶部。 PDF要么使用嵌入，要么iframe包含它。但是，CSS样式不适用于PDF（因为它是一个插件？）。因此，即使我把z-index：1000，那个层仍然在PDF之后。任何想法如何解决这个问题？
So, the problem I face is like this: I have a layer, which it will be placed on top of a pdf on the page. The PDF is either using to embed, or iframe to include it. However, CSS style doesn't apply on PDF (because it is a plug-in? ). Therefore, even I put z-index:1000 for the , that layer still goes behind the PDF. any idea how to fix that?
这里是代码：
<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>
推荐答案
阅读一些论坛... ）
After reading some forums... (here some comments)
PDF由Acrobat Reader插件加载。它是一种自己的东西，与任何HTML或甚至浏览器无关（除了被浏览器加载）。
人们对Flash插件有相同的问题，没有解决方案。所以我想象也没有这个解决方案。
最好的办法是重新设计菜单，使它们不会进入pdf所占用的空间。
The PDF is loaded by the Acrobat Reader plugin. It kind of does it's own thing and has nothing to do with any of the HTML or even the browser for that matter (apart from being loaded by the browser). People have the same problem with the Flash plugin, and there's no solution for that. So I would imagine there's no solution for this either. Your best bet is to redesign your menus so they don't move into the space occupied by the pdf.
如果它是一个插件，那么你不能可靠地将其他元件放在其顶部。浏览器通常放弃他们在插入时涉及layer元素的能力。
If it is a plugin, then you cannot reliably place other elements over the top of it. Browsers usually let go of most of their ability to 'layer' elements when plugins are involved.
没有直接支持覆盖'z-indexing'div在Api或Dom。插件加载一个可执行文件，在非常简单的语句，在浏览器窗口中打孔。使用'iframe shim'技术是标准的解决方法，虽然透明度可能很棘手。
The there is no direct support for overlaying 'z-indexing' a div either in the Api or Dom. The plug-in loads an executable file that, in very simple terms, punches a hole in the browser window. Using the 'iframe shim' technique is the standard workaround although transparency can be tricky.
我的解决方案：
两个iframe， -index，当您单击黄色div时，将显示空的iframe（在pdf iframe前面），因此您可以在pdf文档中看到绿色div。
My SOLUTION: Two iframes, each one inside a div with different z-index, when you click the yellow div, the empty iframe is displayed (in front of the pdf iframe), so you can see the green div inside the pdf document.
<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íguez
frodale@gmail.com
Fernando Rodríguez frodale@gmail.com
这篇关于< div>层在PDF之上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
