Html <div> 图层在 PDF 之上
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/593176/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
<div> layer on top of PDF
提问by Murvinlai
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?
所以，我面临的问题是这样的：我有一个图层，它将被放置在页面上的 pdf 之上。PDF 要么使用嵌入，要么使用 iframe 来包含它。但是，CSS 样式不适用于 PDF（因为它是一个插件？）。因此，即使我将 z-index:1000 作为 ，该层仍然落后于 PDF。知道如何解决这个问题吗？
here is th code:
这是代码：
<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>
回答by
After reading some forums... (here some comments)
在阅读了一些论坛之后......（这里有一些评论）
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.
PDF 由 Acrobat Reader 插件加载。它有点做自己的事情，与任何 HTML 甚至浏览器无关（除了由浏览器加载）。人们对 Flash 插件有同样的问题，而且没有解决方案。所以我想这也没有解决方案。你最好的办法是重新设计你的菜单，这样它们就不会移动到 pdf 占用的空间中。
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.
如果它是一个插件，那么你不能可靠地将其他元素放在它的顶部。当涉及插件时，浏览器通常会放弃大部分“分层”元素的能力。
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.
没有直接支持在 Api 或 Dom 中覆盖“z-indexing”div。该插件加载一个可执行文件，用非常简单的术语来说，就是在浏览器窗口中打一个洞。使用“iframe shim”技术是标准的解决方法，尽管透明度可能很棘手。
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.
我的解决方案：两个 iframe，每个 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>
Fernando Rodríguez [email protected]
费尔南多·罗德里格斯 [email protected]
回答by Chris Shaffer
回答by Dan Lew
Generally you can get around these z-index issues by placing an iframe shim directly under the div. That is, it has the same size and location (but no actual content). I'm not 100% sure this works for PDFs, but I know this fixes some other z-index issues (such as select boxes on IE6).
通常，您可以通过在 div 下直接放置 iframe 垫片来解决这些 z-index 问题。也就是说，它具有相同的大小和位置（但没有实际内容）。我不是 100% 确定这适用于 PDF，但我知道这解决了其他一些 z-index 问题（例如 IE6 上的选择框）。
iframe shims can be a pain if you're placing the div dynamically, since you have to move the iframe shim with it.
如果您动态放置 div，iframe 垫片可能会很痛苦，因为您必须使用它移动 iframe 垫片。
回答by Blake
I just found a solution to this. Use the google pdf viewer in the iframe to display your pdf on the page then it works like any other div.
我刚刚找到了解决方案。在 iframe 中使用 google pdf 查看器在页面上显示您的 pdf，然后它就像任何其他 div 一样工作。
example:
例子：
<iframe id="ifr" src="http://docs.google.com/gview?url=http://www.mysite.com/test.pdf&embedded=true" style="width:718px; height:700px;" frameborder="0">
<iframe id="ifr" src="http://docs.google.com/gview?url=http://www.mysite.com/test.pdf&embedded=true" style="width:718px; height:700px ;" frameborder="0">
回答by Brett Caswell
A solution for some circumstances is to wrap the iframe with a div and use the style attribute 'clip' on the div, or iframe parent.
某些情况下的解决方案是用 div 包装 iframe，并在 div 或 iframe 父级上使用样式属性“clip”。
<!DOCTYPE html>
<html>
<head>
<title>Test Page - IFramed PDF Document Clipping</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type='text/javascript'></script>
<style type='text/css'>
body {padding:0em;margin:0em;font-size:16px;position:relative;}
body * {line-height:1em;}
#TOPNAV {list-style:none;display:block;}
#TOPNAV li {display:inline;}
#IFRAMEWRAPPER
{
display:block;margin:0em;padding:0em;
position:fixed;width:auto;left:0.125em;right:0.125em;top:4.125em;bottom:0.125em;
}
#docFrame {width:100%;height:100%;position:relative;margin:0em;padding:0em;}
input.ACTIVE {background-color:Gray;outline:0.125em solid silver;}
.clearfix {zoom:1;}
</style>
<script type='text/javascript'>
$(document).ready(function () {
$('#TOPNAV input').click(function () {
$("#TOPNAV input.ACTIVE").toggleClass('ACTIVE');
$(this).toggleClass('ACTIVE');
$("#IFRAMEWRAPPER").css("padding", "1em");
$("#IFRAMEWRAPPER").css("padding", "0em");
$("#IFRAMEWRAPPER iframe").toggleClass("clearfix");
$("#IFRAMEWRAPPER").toggleClass("clearfix");
$("#IFRAMEWRAPPER").hide();
$("#IFRAMEWRAPPER").slideDown(2);
});
$('#btnCLICK1').click(function () {
$("#IFRAMEWRAPPER").css("clip", "rect(auto, auto, auto, 5em)");
});
$('#btnCLICK2').click(function () {
$("#IFRAMEWRAPPER").css("clip", "rect(auto, 5em, auto, auto)");
});
$('#btnCLICK3').click(function () {
$("#IFRAMEWRAPPER").css("clip", "rect(5em, auto, auto, auto)");
});
$('#btnCLICK4').click(function () {
$("#IFRAMEWRAPPER").css("clip", "rect(auto, auto, 5em, auto)");
});
});
</script>
</head>
<body>
<div class='TOPNAVWRAPPER'>
<ul id='TOPNAV'>
<li><input type='button' id='btnCLICK1' value='RIGHT' /></li>
<li><input type='button' id='btnCLICK2' value='LEFT' /></li>
<li><input type='button' id='btnCLICK3' value='BOTTOM' /></li>
<li><input type='button' id='btnCLICK4' value='TOP' /></li>
</ul>
</div>
<div id="IFRAMEWRAPPER">
<iframe id='docFrame' name='TargetFrame' src="YOUR-PDF-DOCUMENT.pdf" onloadeddata='' seamless='seamless' ></iframe>
</div>
</body>
</html>
回答by Migol
If it's IE your testing, then it could be the same issue as with ComboBox. Try inserting iframe into div.
如果它是 IE 您的测试，那么它可能与 ComboBox 的问题相同。尝试将 iframe 插入 div。
