Question

我正在处理的网站有Flash标头（使用swfobject嵌入它们）。现在我需要编写一些应该与Flash电影重叠的HTML代码。

我已经尝试在Flash元素的容器和（绝对定位的）div上设置z-index，但它在Flash影片后面“消失”。

我希望有一个CSS解决方案，但是如果有一些JS魔法可以解决这个问题，那我就可以了。

更新：谢谢，将wmode设置为“透明”大部分都是修复它。只有Safari / Mac仍然在第一场秀中隐藏了闪光灯背后的div。当我切换到另一个应用程序并返回时，它将在前面。我能够通过将div的初始样式设置为display: none;来解决这个问题，并在页面加载后半秒钟通过JS显示它。

Answer 1

确保FlashVar“wmode”设置为“透明”或“不透明”，但不是默认设置，“窗口”......那么您应该能够使用CSS z-index

Answer 2

后续注意事项：正如您在更新中发现的那样，将Flash显示在Flash之上是目前的一个挑战性命题，即使使用JS魔术，您发现您应该期望Flash会阻止某些HTML观众使用浏览器，旧版本等。

如果达到任意大的浏览受众群对您（例如移动设备）很重要，那么重新设计内容以避免重叠可能会让您从长远来看避免头痛。

Answer 3

我想补充一点，你必须记住在OBJECT和EMBED标签中设置WMODE参数（“透明”）！

点击链接了解详情： http://kb2.adobe.com/cps/142/tn_14201.html

Answer 4

使用以下样式的代码，它适用于Firefox和chrome

<object id='myId'  width='700' height='500'>
            <param name='movie' value='images/ann/$imagename' />
            <param name='wmode' value='transparent' />
            <!--[if !IE]>-->
            <object type='application/x-shockwave-flash' data='images/ann/$imagename' width='700' height='500' wmode='transparent'>
            <!--<![endif]-->
            <div>
                <h1>Please download flash player</h1>
                <p><a href='http://www.adobe.com/go/getflashplayer'><img src='http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif' alt='Get Adobe Flash player' /></a></p>
            </div>
            <!--[if !IE]>-->
            </object>
            <!--<![endif]-->
        </object>

Answer 5

设置像这样的flash变量

s1.addParam("wmode","transparent");

然后在div标签中使用这种风格

style="z-index:inherit;

问题将会解决。

Answer 6

就像史蒂夫·保罗所说的那样，当你坐在闪光灯顶部的HTML调用更多闪光灯时，就会出现有趣的部分......

哦，我们对那个玩法的乐趣，其中包括将z-index设置为实际上较低，以便考虑到闪光认为它是蜜蜂的膝盖，因此必须始终处于最佳状态。

如何将HTML内容放在Flash电影上？

6 个答案: