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-index。但为什么呢？

有什么想法吗？

Answer 1

在此示例中，z-index仅适用于position:absolute元素。尝试使用-9这样的负值，它应该可以工作。

Answer 2

你的意思是这样的：

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

.innerest {
    z-index: -1;
}

为何有效......

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

在我的小提琴中，我设置了一系列风格来展示正在发生的事情。

你从一个带有两个浮动子节点的父div开始，由于填充（Ex 1），父高度折叠到12px高。

当您声明overflow: hidden时，您将启动一个新的块格式化上下文，并且浮动的子元素将保留在父元素的上下文中，这就是红色背景完全覆盖子元素的原因（例2）。 / p>

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

<强>参考

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

Answer 3

请将z-index：-1添加到innerest类中。它会起作用。

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

}

Answer 4

尝试将负z-index（-1）添加到.innerest类。

Answer 5

现已习惯此代码定义您的.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;
    }

<强> Demo

如何在内部div后面移动内部div

5 个答案: