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/