CSS z-index问题

Question

这是小提琴：http://jsfiddle.net/6Lk4s/

<div class="box">
    <div class="c1"></div>
    <div class="c2"></div>
</div>

我尝试在.box后面显示.c1和.c2（所以框中有一个更高的z-index，所有三个类都有位置：相对设置），但我不能让它以这种方式显示。

我的错误是什么？

Answer 1

.c1和.c2是.box的一部分（因为它们是它的子元素）如果你想让它们落后于它们，它们必须是分开的元素

同样位于.box后面最简单的方法是将绝对定位为：http://jsfiddle.net/6Lk4s/1/

有关z-index如何工作的更多文档请参阅w3c规范，感谢@Joseph Silber：http://www.w3.org/TR/CSS2/zindex.html#painting-order

Answer 2

您的问题是.box是.c2

的父元素

如果您仍然希望使用.box区域限制.c2定位，则可以这样做。

http://jsfiddle.net/6Lk4s/2/

http://jsfiddle.net/6Lk4s/3/ - 另一个显示.c2定位受外框而不是文档限制的示例。

HTML：

<div class="outerbox">

    <div class="box">
        <div class="c1"> </div>
    </div>
        <div class="c2"> </div>

</div>

添加了CSS：

.outerbox { position: relative; float: left; }