CODEWITHSUNDEEP
css
Adam Strudwick
Adam Strudwick

Reputation: 13129

CSS z-index issue

Here is the fiddle: http://jsfiddle.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?

Upvotes: 0

Views: 87

Answers (2)

Joonas
Joonas

Reputation: 7303

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

Upvotes: 0

amosrivera
amosrivera

Reputation: 26514

.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

Upvotes: 1

Related Questions