z-index不适用于HTML5视频

Question

我的网站存在问题，它是z-index类型的作品，但它没有，我没有找到符合我在互联网上的需求的答案。

.Mwrapper 
 
    { 
 
     z-index: 2; 
 
     position: fixed; 
 
     bottom: 0%; 
 
     margin-top: 120em; 
 
    } 
 

 
    .Msliding-background 
 
    { 
 
     z-index: 2; 
 
     background-color: red; 
 
    } 
 

 
    .Mhider 
 
    { 
 
     z-index: 2; 
 
     height: 100%; 
 
     background: linear-gradient(to top, rgba(0,0,0,0), rgba(0,0,0,0.1), rgba(0,0,0,0.2), rgba(0,0,0,1)); 
 
    } 
 
    .Mvid 
 
    { 
 
     z-index: -2; 
 
     position: relative; 
 
     margin-top: 25em; 
 
     text-align: center; 
 
    } 
 

 
    .Mvid video 
 
    { 
 
     position: relative; 
 
     z-index: -1; 
 
     height: 720px; 
 
     width: 1280px; 
 
    } 
 

 
    .Mvideo 
 
    { 
 
     bottom: 724px; 
 
     left: 120px; 
 
     position: relative; 
 
     z-index: 0; 
 
     height: 725px; 
 
     width: 1280px; 
 
     background: radial-gradient(rgba(0,0,0,0), rgba(0,0,0,0.6), rgba(0,0,0,1), rgba(0,0,0,1), rgba(0,0,0,1)); 
 
    }

<div id="Mfog" class="Mwrapper"><div class="Msliding-background"><div class="Mhider"></div> </div></div> 
 
    
 
    <nav class="Mvid"> 
 
     <video id="video"> 
 
      <source src="demo.mp4" type="video/mp4"> 
 
     </video> 
 
     <div class="Mvideo" onclick="audioPause()"></div> 
 
    </nav>

它工作在Mvideo出现上述MVID视频，但Mwrapper不会出现上述MVID感。

所有帮助表示赞赏:)

Answer 1

目前，.Mwrapper甚至没有出现在屏幕上。 首先，您需要为固定项目定义left：value，并且您的margin-top将它完全推到屏幕外。

尝试：

.Mwrapper 
{ 
    z-index: 2; 
    position: fixed; 
    bottom: 0%; 
    left:0; 
} 

有了这个代码，.Mwrapper将是不可见的 - 但只要你把它里面的内容，你会本身它出现。

这是固定的宽度，所以即使它出现时，空的内容：像它应该

.Mwrapper 
{ 
    z-index: 2; 
    position: fixed; 
    bottom:0; 
    left:0; 
    width:100vw; 
    height:50px; 
    background:blue; 
} 

.Msliding-background 
{ 
    z-index: 2; 
    background-color: red; 
    width:calc(100vw - 200px); 
    margin:auto; 
    height:30px; 
} 

你会看到，z-index的一样工作：

https://jsfiddle.net/ZheerH/a444bqLf/2/