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问题（嵌套元素）

2 个答案: