HTML5video忽略了z-index

所以这就是我到目前为止所尝试的：

我有一个固定的菜单，当菜单在video上时，video似乎忽略了z-index。 我目前正在使用镀铬窗户而没有运气。 有任何想法吗？

Answer 1

对两个重叠的元素使用css position:absolute属性，并尝试将大于0值赋给z-index

这是jsFiddle的例子。

CSS：

 #main_container { float: left; position: relative; left:0; top:0; } #video { position: absolute; left: 0px; top: 0px; min-height: 100%; min-width: 100%; z-index: 9997; }​ #overlay { position: absolute; left: 0px; top: 0px; height: 100%; width: 100%; z-index: 9998; } 

HTML：

注意：使用overlay div来停用控件，您可以使用video中的任何内容，例如jsFiddle示例。

来源： video作为在命令上播放的网站上的背景

Answer 2

叠加层也需要是video的兄弟。 如果video是叠加层的子级，则无效。

作品：

不工作：

我只是在Chrome中试过这个，所以如果这不是普遍真实的道歉。

Answer 3

在覆盖/菜单元素上，使用：

 backface-visibility: hidden; 

这对我有用。 我的猜测是它会触发元素上的3d渲染，从而消除了z-index问题。