Chrome/Safari 和 Firefox 中的 z-index 问题（嵌套元素）

Question

基本上.second必须在.third以上。不过，这仅在 Firefox 中。不幸的是，我无法将 .second 移出 .fifth，这就是为什么它让我如此困难。

更多信息：.third 应该是模态背景以使内容 .fifth 和页脚 .fourth 变暗。模态内容为 .second。 Web 应用程序应该适用于 iPad.

上的 Safari

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

Answer 2

最终设法将 .second 移出了 .fifth。对我有用，不幸的是没有令人满意的答案。

Chrome/Safari 和 Firefox 中的 z-index 问题（嵌套元素）

z-index issue in Chrome/Safari and Firefox (nesting elements)

html

css

ipad

browser

z-index