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 索引。我目前在 chrome windows 上工作，但运气不佳。有什么想法吗？

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:

<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 示例中所示。

来源：视频作为网站上的背景，按命令播放

Answer 2

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

backface-visibility: hidden;

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

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 中尝试过这个，所以如果这不是普遍正确的话，我深表歉意。

Answer 4

@media (max-width: 48em) {
.primary-navigation {
    position: fixed;
    inset: 0 0 0 30%;
    z-index: 1000;
    background: steelblue;
    flex-direction: column;
    padding: min(30vh,10rem) 2rem;
    background: hsl(0 0% 0% / 0.75);
    transform:  translateX(100%);
    transition: transform 350ms ease-out;
}

.mobile-nav-toggle {
    display: block;
    position: absolute;
    background: url('assets/images/menu.png');
    background-repeat: no-repeat;
    border: 0;
    width: 3rem;
    aspect-ratio: 1;
    top: 0.2rem;
    right: 1rem;
    z-index: 9999;
}

}