计算Z-指数不匹配元素样式

Question

目前正在研究的HTML5视频播放器。我遇到了这里曾经的视频元素是全屏，我的自定义控件不能点击，由于视频的z-index的被设置到最大int值的问题;一样的控制z索引。默认浏览器的媒体控制已经隐藏。

<div id="video-container">
  <video frameborder='0' id="page-video" playsinline>
        <source src='{{source}}'>
  </video>
  <div class="container" id="player-controls">
     <!-- controls go here -->
  </div>
</div>

这里是在全屏视频容器的CSS：

#video-container {
position: relative;
max-width: 512px;
margin: 0 auto;
}

这里是在全屏视频的CSS：

#page-video:-webkit-full-screen {
width: 100%;
height: 100%;
position: relative;
z-index: 1 !important;
}

下面是控制的CSS：

#player-controls {
position: absolute;
bottom: 0;
left: 0;
max-width: 100%;
height: auto;
margin: 0 auto;
background: rgba(255, 255, 255, 0.8);
visibility: hidden;
transition: all .2s linear;
padding: 0;
width: 100%;
z-index: 2147483647; 
cursor: pointer;
}

在Chrome开发工具，所计算的z-index为视频元素从自动改变时，它不是在全屏2147483647但是点击箭头展开，它显示的z-index：1，从我的样式表的重要风格。这种风格是不是划掉或任何东西。我真的不明白为什么会这样。这些都是在我的整个样式表中只有两个地方使用的z-index。有没有负z索引的任何地方。

Answer 1

视频标签将不理你就可以设置z-index的，除非你设置position: absolute或position: fixed它使用UA风格“自动”和2147483647的。见HTML5 video ignoring z-index

Answer 2

要隐藏本机控制，需要通过“控制”属性来禁用它们。

<video controls="false">...</video>

在某些浏览器中，似乎是一个bug，因此本机的控制仍然是在全屏模式下可见。您可以覆盖浏览器样式表，并手动隐藏起来：

video::-webkit-media-controls {
    display:none !important;
}

要显示您的自定义controlls，只需设置的z-index到最大int值。

#player-controls {
    z-index: 2147483647;
}

所有这一切都在这个博客中描述：https://css-tricks.com/custom-controls-in-html5-video-full-screen/