Question

我的网站存在问题，因为z-index类型有效，但它没有找到符合我需求的答案。

＆＃13;

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

＆＃13;

 <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>

＆＃13;

它的工作原理是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/

z-index不适用于HTML5视频

1 个答案: