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

Question

基本上 .second 必须高于 .third。不过，这仅在 Firefox 中。不幸的是，我无法将 .second 从 .fifth 中移出，这就是为什么它给我带来如此困难的原因。

更多信息:.third 应该是模态背景，使内容 .fifth 和页脚 .fourth 变暗。模态内容是 .second。该网络应用程序应该适用于 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;
}

Answer 1

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

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