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>

Он работает в том смысле, что М.Видео появляется над MVID видео, но Mwrapper не появляется выше MVID.

Все оцененная помощь :)

Answer 1

В настоящее время .Mwrapper не появляется даже на экране. Прежде всего, вам нужно определить значение left: для фиксированного элемента, и ваш край поля полностью отталкивает его от экрана.

Try:

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

Вы увидите, что г-индекс работает так же, как он должен:

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