Question

我正在开发一个网页，我遇到的问题是z-index没有按预期工作。我的结构看起来像这样：

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

在叠加层中，我有一张应该在主类之上但在内容类之下的图片。我试过简单地添加不同的z索引，但它似乎不起作用。我怎么解决这个问题？这是否因为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。

Answer 2

如果没有看到CSS，很难说出发生了什么，但是......

为了使z-index正常工作，您正在使用的所有元素都需要明确position。

一些信息：

http://reference.sitepoint.com/css/z-index
http://reference.sitepoint.com/css/stacking

Answer 3

它适用于这样的正确的CSS：

    .overlay {
    height: 300px;
    width: 200px;
    background-color: blue;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 3;}
.main{
    height: 250px;
    width: 150px;
    background-color: red;
    position: absolute;
    top: 0px;
    left: 0px;}
.content1{
    height: 200px;
    width: 100px;
    background-color: yellow;
    position: absolute;
    top: 0px;
    left: 0px;}
.mainWrapper{
    position: absolute;
}

示例HERE

Z指数未按预期工作

3 个答案: