html - 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-index，但它似乎不起作用。我怎么解决这个问题？发生这种情况是因为 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 在上面。