CSS z-index issue

Question

琴键:http://jsfiddle.net/6Lk4s/

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

我尝试在。box后面显示。c1和。c2(因此box具有更高的z-index，并且所有三个类都具有position:relative set)，但我无法以这种方式显示它。

我的错误是什么?

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; }