【问题标题】：z-index vs <object> : is there any reason why this doesnt work on majors browser? (except Firefox)z-index vs <object> ：有什么理由为什么这在专业浏览器上不起作用？（火狐除外）
【发布时间】：2011-12-15 14:29:58
【问题描述】：

我有this 代码：

HTML

<div class="box_video">
    <object width="330" height="290" type="application/x-shockwave-flash" data="http://www.youtube.com/v/KEkR1ox_K10?version=3&amp;f=user_uploads&amp;app=youtube_gdata&amp;rel=1&amp;border=0&amp;fs=1&amp;autoplay=0" style="visibility: visible;"><param name="allowfullscreen" value="true" /></object>
</div>

<div class="box_fixed">
    My Text
</div>

CSS

.box_video 
{
    z-index: 20;
    height=400;
    background-color: #FF0000;   
    position:relative; 
}

.box_fixed {
    background-color: #2C2C2C;
    bottom: 400px;
    position: fixed;
    width: 100%;
    z-index: 40;
}

现在，我想说明的是 fixed div 应该是视频的 over（box_fixed 的 z-index 高于 box_video）。

但实际上（除了 Firefox）在 IE/Chrome 上（例如）它是下的。

我哪里错了？有什么特殊的<object> 属性需要关心吗？

【问题讨论】：

标签： html css flash youtube

【解决方案1】：

通常可以尝试的一件事是设置参数：

<param name="wmode" value="transparent">

在对象标签中。

例如

<object width="330" height="290" type="application/x-shockwave-flash" data="http://www.youtube.com/v/KEkR1ox_K10?version=3&amp;f=user_uploads&amp;app=youtube_gdata&amp;rel=1&amp;border=0&amp;fs=1&amp;autoplay=0" style="visibility: visible;">
   <param name="allowfullscreen" value="true" />
   <param name="wmode" value="transparent">
</object>

【讨论】：

它对我不起作用。我在 object 标记内使用 embed 标记链接视频，但此解决方案不起作用。
第二个参数是否意味着不被关闭？

【解决方案2】：

您必须将wmode 设置为transparent。

【讨论】：

【解决方案3】：

z-index 不适用于未定位为 absolute、relative 或 fixed 的标签。

所以在你的 CSS 中，

object {
    position: relative; // or absolute or fixed
    z-index: 1; // this will work, so you can do any overlay over this object
}

【讨论】：