如何移动内部div后面的周围div

Question

我的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索引似乎被忽略了。但是为什么呢?

任何想法?

Answer 1

在这个例子中，z-index只作用于position:absolute元素。试着输入一个负值，比如-9，应该可以工作。

Answer 2

你的意思是:

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

.innerest {
    z-index: -1;
}

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

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

你从一个父div开始，它有两个浮动的子div，它们不在流中，并且由于填充(Ex 1)，父div的高度崩溃为12px高。

当你声明overflow: hidden时，你开始一个新的块格式上下文，浮动的子元素保留在父元素的上下文中，这就是为什么红色背景完全覆盖了子元素(例2)。

最后，您可以为.innerest元素添加绝对定位，这将它们从流中取出，并且它们从.outer祖先元素中投影出来。注意，浮动元素会影响包含块的计算高度，这与绝对定位元素不同。在右边的.innerest元素上，您添加z-index: -1，它将该元素置于堆叠顺序(计算为0)中所有其他元素的下方，因此您得到了所需的效果。

参考

http://www.w3.org/TR/CSS2/visuren.html层

Answer 3

请在兴趣类中添加z-index: -1。这将是工作。

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

}

Answer 4

尝试在. interest类中添加负z-index (-1)

Answer 5

现在使用此代码定义您的.outer 类 position relative和remove 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;
    }