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

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.

Although you did describe your problem, it is greatly appreciated to be able to see some code. Consider adding some code so that your question will have a much higher value — Cody Guldner, Jun 18 '13 at 05:12
@Mimo, No, the problem here is that the child overflows the parent, and I needed to hide it behind. Like in the answer from Sergio http://jsfiddle.net/L29d2/ — carcargi, Jul 01 '13 at 17:03

score 8 · Accepted Answer · answered Jun 18 '13 at 05:23

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

score 0 · Answer 2 · answered Jun 18 '13 at 05:25

Apply the following style to the child element:

position:relative;
z-index:-1;

You can adjust the z-index value, but it should be negative. May be it will solve your problem. For more information you can check out this page http://www.tutorialrepublic.com/css-tutorial/css-position.php

score 0 · Answer 3 · answered Jun 18 '13 at 05:28

Sergio is exactly right, if the parent inherits the index the child can be negative and hide. At least that is true in my tests. Also note that you have to use relative/absolute/fixed positioning for the child.

http://jsfiddle.net/6xT45/

#parent
{
    position: absolute;
    width: 100px;
    height: 100px;
    background: blue;
}

#child
{
    position: absolute;
    z-index: -1;
    width: 50px;
    height: 50px;
    top: 25px;
    left: 25px;
    background: red;
}

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

3 Answers3