Z-Index 属性不适用于 youtube 视频答案

【问题标题】：Z-Index property not working over a youtube videoZ-Index 属性不适用于 youtube 视频
【发布时间】：2012-09-19 15:19:32
【问题描述】：

我的网站在 VB 中使用 VS 2010，我的 z-index 属性设置为 20，它在图片和其他东西上运行良好。但是我有两个 youtube 视频，并且 z-index 属性不起作用；我要显示的菜单被 youtube 视频所覆盖——但仅限于 IE；其他浏览器运行正常！

我做错了吗？或者当它是一个 youtube 视频时，我应该做些什么不同的事情？

我的嵌入视频看起来像这样，它覆盖了我的菜单：

<table class="tablestyle0">
<tr>
<td>
<iframe id="ShowFrameID" width="640" height="480"            
     src="http://www.youtube.com/embed/IxiZ0sdh6hw?wmode=opaque?        
modestbranding=1&amp;rel=0">
</iframe>
</td>
</tr>

非常感谢您在这方面的任何帮助或指导！

【问题讨论】：

标签： asp.net html css youtube z-index

【解决方案1】：

如果您将 wmode=opaque 更改为 wmode=transparent，则 YouTube 播放器应尊重您的 z-index 顺序。

编辑：问题是您的 YouTube 网址中有两个 ? 字符。 wmode=opaque 部分未通过服务器。

在我做出改变后，它对我有用。您可能不必将其设置为 transparent（opaque 也应该可以使用）。

<table class="tablestyle0">
<tr>
<td>
<iframe id="ShowFrameID" width="640" height="480"            
     src="http://www.youtube.com/embed/IxiZ0sdh6hw?wmode=opaque&amp;modestbranding=1&amp;rel=0">
</iframe>
</td>
</tr>

【讨论】：

嗨，感谢您抽出宝贵时间阅读并回复我的问题，jimp。我按照您的指示进行操作，但仍然出现同样的错误；菜单被视频覆盖。但我只有 IE 的问题； Chrome、Safari 和 Firefox 都尊重 Z-index 属性。
哪个版本的IE？较旧的 IE 版本（我认为是 9 之前？）已知存在不符合标准的 z-index 排序错误。基本上，z-index stack resets to 0 for each positioned element。也许这是你的问题。
嗨，吉普。 IE9。我的网站有 10 种不同的语言，这是我的 products.master 的样子：
标签>
这是我添加到 site.css 的内容： div.youtube { padding: 4px 0px 4px 8px;边框半径：3px； -moz-边界半径：3px； -webkit-border-radius：3px；边框：0px 实心#800000； z指数：20； }
绝对有效！感谢您的时间和耐心，Jimp -- 我非常感谢您的帮助，特别是考虑到更多的人在 IE 中查看我的网站，而不是任何其他浏览器。再次感谢！

【解决方案2】：

将position:relative 添加到您的表格类的 CSS 中，然后它应该遵循 z-index。

【讨论】：

感谢辛西娅花时间阅读和回复。我正在与@Jimp 合作，终于解决了这个问题。我还有很多视频，接下来我会尝试您的解决方案。再次感谢！