position absolute not working on iframe_问答_开发者

开发者 https://www.devze.com 2023-03-16 02:01 出处：网络

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

相关专题：css

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>

I'm assiming, by the z-index on your inner div and that you're trying to position it over the iframe.

It doesn't work, because Frames (including IFrames) are independent subwindows over the original window, so it doesn't matter how much you increment you z-index, the div will only be higher in the index of objects in the base windows, and will never get on top of the object in the subwindow.

In you specific case it would be even more complex to do, as the subwindow is draw by a different program (I'm assuming Acrobat Reader, but it would depend on you computer configuration).

Another element over which you usually can't position anything is OBJECT and EMBED - think of flash, for instance, because that space is draw by a different program. It may work on some browsers, but it's not specified to work and it doesn't work in most browsers.

It works in Firefox, so I don't know.

Have you tried giving the iframe a z-index lower than the previous div?

Because you don;t have position:absolute on the iframe, you have it on the div before it;

try this:

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

PDF Only works if the client has the plugin to open it at the browser!
Examples: Acrobat Reader, Chrome internal PDF Reader, etc.

Tip/Answer: Convert your PDF Files into JPG Files and use a PageFlip Flash to read them.

Example: http://www.revistainpeople.com/edicoes

Tip 2:
You can easly convert pdf's on linux using this command: convert sample.pdf sample.png

EDIT:
If you use pageflip (flash) you don't have problems with z-index property, it will work normaly, because you will find always adobe flash player on clients instead some nasty plugin to read pdf's.