Question

http://jsfiddle.net/K4uEs/2/

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <title>Untitled Page</title>
    </head>
    <body>
        <div style="height:600px;width:1000px;position:relative;margin:auto;">
            <div style="position:absolute;top:30px;left:50px;height:100px;z-index:9999;background:red;">This is not visible </div>
             <iframe src="http://www.irs.gov/pub/irs-pdf/fw4.pdf" height="50%" width="100%"></iframe>
</div>
    </body>
    </html>

Answer 1

它适用于Firefox，所以我不知道。

您是否尝试过为iframe提供比前一个div低的z-index？

Answer 2

因为你在iframe上没有position:absolute，所以在它之前的div上有它;

试试这个：

<div style="position:absolute;top:30px;left:50px;height:100px;z-index:9999;background:red;">This is not visible 
         <iframe src="http://www.irs.gov/pub/irs-pdf/fw4.pdf" height="50%" width="100%"></iframe>
</div>

Answer 3

我正在通过内部div上的z-index以及您尝试将其放在iframe上来表示。

它不起作用，因为Frames（包括IFrames）是原始窗口上的独立子窗口，所以你增加z-index的数量并不重要，div只会在对象的索引中更高基本窗口，永远不会在子窗口中的对象之上。

在你的特定情况下，它会更复杂，因为子窗口是由不同的程序绘制的（我假设是Acrobat Reader，但它取决于你的计算机配置）。

你通常无法定位任何东西的另一个元素是OBJECT和EMBED - 例如，想想flash，因为这个空间是由不同的程序绘制的。它可能适用于某些浏览器，但它没有指定工作，并且在大多数浏览器中都不起作用。

Answer 4

PDF 仅适用如果客户有插件在浏览器中打开！示例：Acrobat Reader，Chrome内部PDF阅读器等

提示/答案：将 PDF 文件转换为 JPG 文件，然后使用 PageFlip Flash来阅读它们。

示例： http://www.revistainpeople.com/edicoes

提示2：
您可以使用以下命令在linux上轻松转换pdf：convert sample.pdf sample.png

修改
如果你使用pageflip（flash）你没有z-index属性的问题，它会正常工作，因为你会在客户端找到adobe flash player而不是一些讨厌的插件来阅读pdf。

绝对不能在iframe上工作

4 个答案: