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: 值，并且您的 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/

z-index 不适用于 HTML5 视频

z-index not working for HTML5 video

html

css

z-index

html5-video