HTML5视频忽略z-index

Question

所以这是我目前尝试过的：

<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-index。目前在Chrome Windows上工作，但没有成功。有什么想法吗？

- Waymas

---

这是故意的吗：z-index:-10;？ - Francis Nepomuceno

Answer 1

使用CSS的 position:absolute 属性来给两个需要重叠显示的元素设置位置，并尝试将 z-index 的值设为大于 0 的值。

这里有一个工作的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：

<div id="main_container">
<div id="overlay"></div>
<video id="video" width="" height="" controls="controls" loop="loop" autoplay="">
 <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
 <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg" />
  Your browser does not support the video tag.
</video>
</div>

注意：使用覆盖层div来停用控件，您可以在视频上使用任何内容，就像jsFiddle示例中一样。

来源：网站背景视频按命令播放

- Barlas Apaydin

---

我知道这听起来很疯狂，但至少在Chrome和iOS Safari上它并不总是有效：我找到的唯一解决方案是将元素放在视频标签之后，在HTML中。 - taseenb

这个问题不再出现了。如果你认为你遇到了它，请先检查其他选项（对我来说是在.css中的background:transparent）。 - Lis

Answer 2

在您的叠加/菜单元素上，请使用以下内容：

backface-visibility: hidden;

这对我很有帮助。我猜测它会在元素上触发3D渲染，从而消除z-index问题。

- Henrik Christensen

---

这让我疯狂了一分钟，试图找到同一容器中的两个项目（视频+文章）未按文档顺序堆叠的原因。对我来说，将z-index: 100添加到两者都解决了问题。z-index优先于3D渲染堆叠上下文。 - Simon_Weaver

Answer 3

覆盖层也需要是视频的兄弟节点。如果视频是覆盖层的子节点，则无法正常工作。

有效示例：

<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中尝试过这个，如果这不是普遍的真相，请见谅。

- faber123