Is there a way to put a child element behind its parent using css? [duplicate]

Question

I was wondering if there is a way to put child element behind its parent using css. I now z-index is not an option because the child elements inherits the z-index of their parents. But I want to know if there's a hack or anything I can use to get this done. Or if there's a javascript hack or anything.

Forgive the bad english.

Answer 1

If the parent has no z-index and the child has negative z-index it works. Check here:

jsfiddle.net/L29d2/

html

<div class="big">
    <div class="small"></div>
</div>

css

.big {
background-color:red;
width:400px;
height:400px;
}
.small {
float:left;
position:absolute;
background-color:blue;
width:200px;
height:200px;
margin-left:300px;
z-index:-1;
}