Is there a way to put the child after the parent using css?

Question

I was wondering if there is a way to put the child behind the parent using css. I now z-index is not an option, because children inherit the z-index of their parents. But I want to know if you have a hack or anything that I can use to do this. Or if there is a javascript hack or something else.

Sorry bad English.

Answer 1

If the parent does not have a z-index and the child has a 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; } 

Answer 2

Apply the following style to the child:

 position:relative; z-index:-1; 

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

Answer 3

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

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