Z-index 未按预期工作

Question

我正在开发一个网页，但我遇到了 z-index 无法按预期工作的问题。我的结构是这样的：

<div class="mainWrapper">
    <div class="overlay"></div>
    <div class="main">
        <div class="content1">
            content goes here
        </div>
    </div>
</div>

在叠加层中，我有一张图片应该在主类之上，但在内容类之下。我试过简单地添加不同的 z-indexes，但它似乎不起作用。我怎么解决这个问题？这是因为overlay-div 在其他div 之外吗？

Answer 1

<style>
.mainWrapper{ position:relative; }
.overlay{ position:absolute; }
.main{ position:absolute; }
.content1{ position:absolute; }
</style>
<div class="mainWrapper">
    <div class="main"></div>
    <div class="overlay"></div>        
    <div class="content1">
        content goes here
    </div>
</div>

通过绝对定位，项目将按照它们添加到页面的顺序分层。所以在这里，main 将是底层，然后覆盖在其之上，然后 content1 位于其之上。