HTML5ビデオでz-indexが機能しない

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：値を定義する必要があります。余白部分は画面から完全に外れています。

試してみてください。このコードの

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

、.Mwrapperは表示されません - しかし、できるだけ早くあなたがそれの内側にコンテンツを置くように、あなたがseそれが表示されます。ここで

それは一定の幅であるので、それもコンテンツのとき、空に表示されます。

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

：それはになっているようにあなたが正確に動作していることのzインデックスを参照してくださいよ

.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; 
}