22

所以，我面临的问题是这样的：我有一个图层，它将被放置在页面上的 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>
4

6 回答 6

26

在阅读了一些论坛之后......（这里有一些评论）

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>

费尔南多·罗德里格斯 frodale@gmail.com

于 2009-04-02T22:33:40.330 回答
5

有一个 jquery 插件bgiframe，它使实现这个修复相当简单。

于 2009-02-27T01:24:30.810 回答
1

通常，您可以通过将 iframe shim 直接放在 div 下方来解决这些 z-index 问题。也就是说，它具有相同的大小和位置（但没有实际内容）。我不是 100% 确定这适用于 PDF，但我知道这修复了一些其他 z-index 问题（例如 IE6 上的选择框）。

如果您动态放置 div，iframe 垫片可能会很痛苦，因为您必须使用它来移动 iframe 垫片。

于 2009-02-27T01:21:24.267 回答
1

我刚刚找到了解决方案。使用 iframe 中的 google pdf 查看器在页面上显示您的 pdf，然后它就像任何其他 div 一样工作。

例子：

<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">

于 2011-04-20T20:32:02.733 回答
0

如果您的测试是 IE，那么它可能与 ComboBox 的问题相同。尝试将 iframe 插入 div。

于 2009-02-27T01:17:10.733 回答
0

某些情况下的解决方案是用 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>
于 2012-10-29T18:07:39.993 回答