html - Windows 浏览器上的视频 z-index 问题

Question

在 vimeo 视频上叠加 png 时遇到问题，似乎它可以在所有 Mac 浏览器上运行，但 Windows 上的 Firefox、Internet Explorer 等似乎会忽略它并将其放在后面。

这是网站示例，它是黑色的“下载卷轴”按钮:http://www.warface.co.uk/clients/detail-shoppe

非常感谢

HTML

<div class="video-block">
<a class="download-reel left">Download Reel</a>
</div>

CSS

.download-reel {
   width:139px;
   height:32px;
   display:block;
   top:-5px;
   text-indent: -4000px;
   z-index: 11;
   position: absolute;
 }

和视频嵌入代码:

<object width="720" height="405"><param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=11479633&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=15bedc&amp;fullscreen=1" />
<embed src="http://vimeo.com/moogaloop.swf?clip_id=11479633&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=15bedc&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="720" height="405">
</embed></object>

Answer 1

默认情况下，对象/嵌入的 wmode 是“窗口”，这意味着它分层在除相同元素之外的任何浏览器元素之上。

您需要提供“不透明”或“透明”的 wmode，您通常需要后者。

<param name="wmode" value="transparent">或<embed wmode="transparent">取决于元素。