HTML div 显示在 Flash 对象之上答案

【问题标题】：HTML div display on top of Flash ObjectHTML div 显示在 Flash 对象之上
【发布时间】：2011-06-22 03:08:28
【问题描述】：

我有一个 Flash 幻灯片，上面有 2 个 div，一个在顶部，一个在底部。

<header>
<div id="top-menu">
 <ul>
  <li>Main Menu Link</li>
  <li>Main Menu Link</li>
  <li>Main Menu Link</li>
 </ul>
</div>
<header>
<div id="content">
 <div id="slideshow_wrapper">
  <section id="intro">
   <p>Introduction Text</p>
  </section>
  <section id="slideshow">
   <!--dynamically inserted flash object-->
  </section>
 </div>
</div>

两者都在 Firefox/Safari/Chrome 中正确覆盖，但我尝试的任何方法似乎都无法使其在 IE 中运行。我正在使用Remy Sharp's HTML 5 enabling script 使HTML5 标记在较低版本的IE 中工作。有趣的是，第二个 div #intro 正确叠加，但 #top-menu 总是出现在幻灯片后面。

所有 3 个元素都通过显式设置的 z-indexes 绝对定位。无论我将它们设置多高或低，flash 对象始终位于#top-menu 元素的前面。

我检查了呈现的<param> 标签，其中一个标签将wmode 列为transparent。

flash 对象是通过 CMS 使用 php 动态插入的，因此我无法访问许多人建议添加 transparent 属性的 <embed> 标签。

【问题讨论】：

您需要将 wmode="transparent" 添加到嵌入标签中，抱歉。
其实我是在写完代码后才想到的。我在问题 div 的父标签上添加了 z-index 声明，它起作用了。与幻灯片显示在不同的父 div 中并在#top-menu 的父 div 之后有关。一个 div 工作正常而另一个 div 却很难，这看起来确实很奇怪。
实际上，我相信它是wmode: "opaque"，或者至少这是我必须在我的应用程序中使用的，我有一个 Flash 横幅和一个下拉菜单。
我尝试将 wmode 更改为 opaque 但没有区别。
请发布您的完整代码。它是 z:index、在 div 中使用 position:relative、position:absolute 以及 wmode 的组合。作为

标签： html css flash

【解决方案1】：

<div class="wrapper" style="position:relative;width:50px;height:200px">
    <div class="swf">
        <object type="application/x-shockwave-flash" data="http://www.xxxxxxxxxxxxxx.com/catwalk/flvplayer_novolume_crop_runway7.swf?autoStart=false&file=../catwalk/movies/379_6.flv&repeat=true" width="50" height="200" wmode="transparent">
        <param name="movie" value="http://www.xxxxxxxxxxxxxx.com/catwalk/flvplayer_novolume_crop_runway7.swf?autoStart=false&file=../catwalk/movies/379_6.flv&repeat=true" />
        <param name="wmode" value="transparent" />
        </object>
    </div>
    <div class="bottom" style="position:absolute;border:1px solid #333;background:#fff;width:50px;height:25px;bottom:15px">bottom</div>
    <div class="top" style="position:absolute;border:1px solid #333;background:#fff;width:50px;height:25px;top:47px">top</div>
</div>

只需尝试使用底部：15px 和顶部：15px - 然后删除边框并根据需要设置框的样式。不建议使用上面的目标代码，因为我只是为您输入一个快速解决方案。

为您提供一个活生生的例子，请注意视频上方的顶部框：http://www.xxxxxxxxxxxxxx.com/x.php

【讨论】：

如果我没记错的话，这并没有解决问题，因此我不能接受它作为答案。
那么请将您的答案发布到解决方案中。