CSS z-index issue

Here is the fiddle: http://j开发者_开发百科sfiddle.net/6Lk4s/

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

I try to display .c1 and .c2 behind .box (so box has a higher z-index and all three classes have position:relative set), but I can't get it to show up this way.

What is my error?

.c1 and .c2 are part of .box (as they are child element of it) if you want them to be behind it they have to be separated elements

Also to position behind .box the easiest way is to position absolute them see: http://jsfiddle.net/6Lk4s/1/

For more documentation on how z-index works see the w3c spec thanks to @Joseph Silber: http://www.w3.org/TR/CSS2/zindex.html#painting-order

Your problem is that .box is the parent element to .c2

If you still wanted to go with having that .box area to restrict .c2 positioning, you could do it like this.

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

http://jsfiddle.net/6Lk4s/3/ - Another example to show that .c2 positioning is restricted by the outer box rather than document.

HTML:

<div class="outerbox">

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

</div>

Added CSS:

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