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

默认情况下，object / embed的wmode是“window”，这意味着它分层在除了相同元素之外的任何浏览器元素之上。

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

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

Answer 2

Z-index仅适用于已定位为绝对或相对的div。

如果div在另一个中嵌套，如果你在div上使用它，它有时也行不通。尝试添加z-index和position：相对于父div或该div的父级。

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

2 个答案: