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

【问题标题】：Video tag at Chrome overlays on topChrome 上的视频标签覆盖在顶部
【发布时间】：2014-03-06 06:44:22
【问题描述】：

其他浏览器都可以，但只有在 chrome 中，视频在顶部播放，忽略 z-index。

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

绝对定位'IUView_4'，但它显示在视频下方。

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>

【问题讨论】：

标签： html css google-chrome video

【解决方案1】：

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

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

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

【讨论】：

像魅力一样工作。非常感谢

【解决方案2】：

在 Google Chrome 64 上，这成功了：

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

【讨论】：