Javascript HTML5视频忽略z索引

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

<div id="video" style="position:absolute;margin-top: 231px;margin-left: 127px;">            
    <video width="520" height="390" style="z-index:-10;">
        <source src="m/video.ogv" type="video/ogg">
        <source src="m/video.mp4" type="video/mp4">
    </video>        
</div>

---

我有一个固定的菜单，当菜单位于视频上方时，视频似乎忽略了z索引。我目前正在chrome windows上工作，运气不好。有什么想法吗？

对重叠的两个元素使用css

position:absolute

属性，并尝试将高于

0

的值赋给

z-index

css:

html:

您的浏览器不支持视频标记。

注意：使用overlay div来停用控件，您可以使用视频中的任何内容，如JSFIDLE示例中所示

---

来源：

覆盖还需要是视频的兄弟。 如果视频是覆盖层的子项，则该选项将不起作用

作品：

<div id="container">
  <div id="overlay" style="width:100px; height:100px; position:absolute; top:20px; left:20px; z-index:20;">
  </div><!-- end #overlay -->
  <video id="video" style="width:100px; height:100px; position:absolute; top:20px; left:20px; z-index:10;">
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
  </video>
</div><!-- end #container -->

不起作用：

<div id="container">
  <div id="overlay" style="width:100px; height:100px; position:absolute; top:20px; left:20px; z-index:20;">
    <video id="video" style="width:100px; height:100px; position:absolute; top:20px; left:20px; z-index:10;">
      <source src="video.mp4" type="video/mp4">
      <source src="video.webm" type="video/webm">
    </video>
  </div><!-- end #overlay -->
</div><!-- end #container -->

---

我只在Chrome中尝试过这一点，如果这不是普遍正确的话，我深表歉意。

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

backface-visibility: hidden;

---

这对我有用。我猜它会触发元素上的3d渲染，从而消除z索引问题。

这是故意的：

z索引：-10？我知道这听起来很疯狂，但至少在Chrome和iOS Safari上，它并不总是起作用：我找到的唯一解决方案是在html中的视频标签后添加元素。这个问题不再发生了。如果你认为你面对它，首先检查其他选项（对我来说是背景：transparent in.css）
<div id="container">
  <div id="overlay" style="width:100px; height:100px; position:absolute; top:20px; left:20px; z-index:20;">
    <video id="video" style="width:100px; height:100px; position:absolute; top:20px; left:20px; z-index:10;">
      <source src="video.mp4" type="video/mp4">
      <source src="video.webm" type="video/webm">
    </video>
  </div><!-- end #overlay -->
</div><!-- end #container -->

backface-visibility: hidden;