iframe z-index in ie8_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-03-19 18:11 出处：网络

Hi sorry every one my English is not good! I am using an iframe for a video. Above the iframe there is a dropdown menu, it is working well in firefox but开发者_如何转开发 in ie8 dropdown goes to underneath the iframe. If I replace the iframe with an image it is working good. I have play with position and z-index properties a long day but there is no use. Please help me if there any solution for avoiding this issue!!

Assuming your video is being played by Flash....

If you're embedding Flash you should explicitely set the wmode parameter to opaque to avoid dropdowns diving behind the flash object. You could also use a library to deal with the nasty details of embedding flash in different browsers.

EDIT: instead of including an iframe try this - took your movie and used the embedding link youtube presents at the end of the movie:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>Embedded YT Movie with DIV element on top</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>

        <object style="height: 390px; width: 640px">
            <param name="movie" value="http://www.youtube.com/v/zFJfbDETIIk?version=3">
            <param name="allowFullScreen" value="true">
            <param name="allowScriptAccess" value="always">
            <param name="wmode" value="opaque"> <!-- I added this one wrt youtube's proposed URL -->
            <embed src="http://www.youtube.com/v/zFJfbDETIIk?version=3" type="application/x-shockwave-flash"
                   allowfullscreen="true" allowScriptAccess="always" width="640" height="390" 
                   wmode="opaque" <!-- I added this one wrt youtube's proposed URL -->
                   >
        </object>
        <div style="position:absolute;width:300px;height:300px;top:10px;left:10px;background-color: red;">
            This one should be on top.
        </div>
    </body>
</html>