CSS顶层的图层

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

解决方法

阅读一些论坛后(这里有一些意见)

PDF由Acrobat Reader插件加载。这是一种自己的事情，与任何HTML甚至浏览器无关(除了被浏览器加载)之外。
人们与Flash插件有同样的问题，而且没有解决方案。所以我想象也没有这个解决方案。
你最好的办法是重新设计你的菜单，以便它们不会进入pdf所占据的空间。

如果它是一个插件，那么您无法将其他元素放置在其顶部。当涉及插件时，浏览器通常会放弃大部分的“层”元素的能力。

没有直接支持在Api或Dom中叠加“z-indexing”一个div。该插件加载了一个可执行文件，它以非常简单的方式在浏览器窗口中打了一个洞。使用’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>

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

原文链接：/css/219215.html

解决方法

猜你在找的CSS相关文章