1

我的 HTML：

<div class="outer">
    <div class="inner">
        Lorem Ipsum
        <div class="innerest">
            <!-- no content -->
        </div>
    </div>
    <div class="inner">
        Lorem Ipsum
        <div class="innerest">
            <!-- no content -->
        </div>
    </div>
</div>

我的 CSS：

.outer {
    background: red;
    padding: 6px 20px;
    z-index: 10;
    overflow: hidden;
}

.inner {
    background: green;
    z-index: 11;
    float: left;
    margin-left: 12px;
}

.innerest {
    background: blue;
    width: 30px;
    height: 20px;
    z-index: 9;
    position: absolute;
}

这是一个小提琴：http: //jsfiddle.net/jsnlry/ycJdy/

我希望蓝色盒子在红色盒子后面。在这种情况下，z-index 似乎被忽略了。但为什么？

任何想法？

4

5 回答 5

2

在此示例z-index中，仅适用于position:absolute元素。尝试输入一个负值，如 -9，它应该可以工作。

于 2013-04-26T11:19:31.920 回答
1

你的意思是这样的：

http://jsfiddle.net/audetwebdesign/WJzRY/

.innerest {
    z-index: -1;
}

为什么这有效...

默认情况下，z-index计算auto为 0，所有元素具有相同的堆叠级别。

在我的小提琴中，我设置了一系列样式来显示正在发生的事情。

您从一个父 div 开始，其中有两个不流动的浮动子级，并且由于填充（Ex 1），父级高度折叠到 12px 高。

当你声明 时overflow: hidden，你启动了一个新的块格式化上下文并且浮动的子元素保留在父元素的上下文中，这就是为什么红色背景完全覆盖了子元素（Ex 2）。

最后，您可以为.innerest元素添加绝对定位，这会将它们从流中取出并从.outer祖先元素中突出。请注意，与绝对定位元素不同，浮动元素会影响包含块的计算高度。在右边的.innerest元素上，添加z-index: -1将这个元素放置在堆叠顺序中的所有其他元素下方（计算为 0），这样就可以获得所需的效果。

参考

http://www.w3.org/TR/CSS2/visuren.html#layers

于 2013-04-26T11:19:16.213 回答
0

请将 z-index: -1 添加到最内层。这将是工作。

 .innerest {
 background: blue;
 width: 30px;
 height: 20px;
 z-index: -1;
 position: absolute;

}

于 2013-04-26T11:19:59.057 回答
0

尝试将负 z-index (-1) 添加到您的 .innerest 类。

于 2013-04-26T11:21:04.180 回答
0

现在习惯了这段代码定义你的.outer 类 position relative并删除 overflow hidden

    .outer {
            background: red;
            padding: 6px 20px;
            position:relative; //add this line 

        }

.outer:after{
content:"";
clear:both;
overflow:hidden;
display:table;
}

    .innerest {
        z-index: -1; // add this line
        position: absolute;
    }

演示

于 2013-04-26T11:22:59.587 回答