Question

其他浏览器都可以，但只有Chrome，视频才能播放，忽略了z-index。

以下是代码，在Chrome中看起来很奇怪。

IUView_4＆＃39;绝对定位，但它会在视频下显示。

Chrome出了什么问题？有办法处理吗？

<style>
    #Page {background-color : rgb(255,255,255); position : relative; z-index : 0; width : 100.0%; margin : auto; height : 1300.0px; }
    #Movie {background-color : rgb(0,198,245); top : 94.0px; z-index : 0; width : 521.0px; left : 131.0px; height : 242.0px; }
    #View {height : 70.0px; width : 100.0px; background-color : rgb(0,164,89); z-index : 1; top : 62.0px; overflow : hidden; left : 435.0px; position:absolute;  }
</style>
<body >
    <div>
      <div id='Page' >
          <div id='Movie' >
              <video width=100% height=100% poster='res/gazzetta_thumbnail.png' autoplay>
                  <source src="http://www.sketchin.ch/en/wp-content/themes/Sketchin2013/assets/video/page-home/gazzetta.mp4" type="video/mp4">
                  <object data="http://www.sketchin.ch/en/wp-content/themes/Sketchin2013/assets/video/page-home/gazzetta.mp4" width="100%" height="100%" /> </object>
              </video>
          </div>
          <div id='View' >     
          </div>
       </div>
   </div>
 </body>

Answer 1

我们在网站上遇到了类似的问题，并实施了fix described in this stack overflow page。

在我们的例子中，我们将以下CSS添加到相对定位的叠加层（而不是上面链接中描述的固定位置元素），它继续在视频后面消失：

-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0);

Answer 2

在Google Chrome 64上，这就是诀窍：

audio, video { position:relative; z-index:-1; }

Chrome上的视频标签覆盖在顶部

2 个答案: