在 Flash embed 前放置一个 div答案

【问题标题】：Placing a div in front of a flash embed在 Flash embed 前放置一个 div
【发布时间】：2011-01-07 20:16:40
【问题描述】：

我需要在页面上的所有其他内容上方放置一个 div 标签。我已经读过将 wmode 参数设置为 opaque 会做到这一点，但也听说这只会影响 IE。这是真的？你是怎么做到的？

【问题讨论】：

你不是说wmode='transparent'吗？
opaque 和 transparent 都强制 Flash 作为页面流的一部分进行绘制，透明允许来自 Flash 的透明效果。 window（默认）将导致 Flash 电影呈现到它自己的缓冲区，在页面布局上方。

【解决方案1】：

在您的 Flash 小程序标签中，只需包含以下内容：

<object id='flashObject' ....>
    <param ....>
    <param name='wmode' value='opaque'>
    <embed ... wmode='opaque'>
    </embed>
</object>

这应该会解决它。

请注意，这样做的缺点是它会减慢 Flash 电影和页面元素的渲染速度，但在大多数情况下应该不是问题。

此外，通过将 this 作为对象参数和嵌入属性包含在内，它适用于所有主流浏览器。

编辑，根据 MidnightLighning 的评论：

以这种方式准备好 flash 对象后，您需要将 div 浮动到页面上，如下所示：

<body>
    <object> ... <!-- this is your flash movie --> </object>
    <div id="floater">The Floating Div</div>
</body>

然后像这样创建你的 CSS：

#flashObject { position:relative; z-index:1 }
#floater { position:absolute; z-index:100; top:0; left:0; }

【讨论】：

然后您是否使用position:absolute; 将您的DIV 定位在Flash 元素上？上面的代码正确地准备了 Flash 元素，但是你需要将 DIV 放在它上面；或许将 z-index 分配给包含 Flash 元素的
@Webnet：什么不完全有效？闪光灯是否仍在 div 上方渲染？ div 定位不正确吗？将您的页面精简到一个可以演示问题的最小示例并发布代码将是一个很大的帮助。

【解决方案2】：

在我的客户网站上，我使用了 html：

<div id="photo>
  <div id="flash"></div>
  <ul id="navigation">..</ul>
</div>

css:

#flash { z-index: 6; }
#navigation { z-index: 8; margin-top: -100px; }

然后我将#flash 替换为我的闪存swf 与SWFObject (http://code.google.com/p/swfobject)

所以基本上，z-index 和一些嵌入 Flash 的智能方法应该工作:)

【讨论】：