html - Chrome/Safari和Firefox中的z-index问题(嵌套元素)

基本上.second必须高于.third。虽然只有在Firefox中。不幸的是，我无法将.second移出.fifth，这就是为什么它给我带来了如此艰难的时光。

有关更多信息：.third应该是使内容.fifth和页脚.fourth变暗的模式背景。模态内容为.second。该Web-App应该适用于iPad上的Safari。

JSFiddle

<div class="first"></div>
<div class="fifth">
    <div class="second">I should be on top.</div>
</div>
<div class="third"></div>
<div class="fourth"></div>

    

.first{
    z-index: 10;
    /* styling */
    position: fixed; top: 0; left: 0; right: 0; height: 50px; background: lightblue;
}
.second{
    z-index: 9;
    /* styling */
    position: fixed; top: 100px; left: 50px; right: 50px; bottom: 100px; background: darkseagreen;
}
.third{
    z-index: 8;
    /* styling */
    position: fixed; top: 50px; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.1);
}
.fourth{
    z-index: 7;
    /* styling */
    position: fixed; bottom: 0; left: 0; right: 0; height: 50px; background: indianred;
}
.fifth{
    /* styling */
    position: fixed; top: 50px; left: 0; right: 0; bottom: 50px; background: darkgrey;
}

最佳答案

给.fifth一个大于z-index的.third。

    .first{
        z-index: 10;
        /* styling */
        position: fixed; top: 0; left: 0; right: 0; height: 50px; background: lightblue;
    }
    .second{
        z-index: 9; /* You probably do not need this */
        /* styling */
        position: fixed; top: 100px; left: 50px; right: 50px; bottom: 100px; background: darkseagreen;
    }
    .third{
        z-index: 8;
        /* styling */
        position: fixed; top: 50px; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.1);
    }
    .fourth{
        z-index: 7;
        /* styling */
        position: fixed; bottom: 0; left: 0; right: 0; height: 50px; background: indianred;
    }
    .fifth{
        z-index: 9;
        /* styling */
        position: fixed; top: 50px; left: 0; right: 0; bottom: 50px; background: darkgrey;
    }

    <div class="first"></div>
    <div class="fifth">
        <div class="second">I should be on top.</div>
    </div>
    <div class="third"></div>
    <div class="fourth"></div>