Make child div in back of parent div with z-index? - html

Question

No matter what I try, the child div is always in front of the parent. Is there a way to make the child div in back of the parent? z-index doesn't seem to work.
Notes :
I don't want to change the html
parent must have a z-index
duplicate "How to make child element upper than parent with z-index" doesn't make grammatical sense and is hard to read, and didn't really help me.
<div id='parent'>
<div id='child'>
</div>
</div>
#parent {
width:50px;
height:50px;
background:red;
position:absolute;
z-index:100;
}
#child {
width:50px;
height:50px;
background:blue;
position:absolute;
z-index:-100;
}
JSFiddle

Answer 1

Don't make the child div actually contained in the parent. Since the positions are absolute you can do this:
<div id='parent'>
</div>
<div id='child'>
</div>
Now if the z-index of parent is less than that of child it will appear on top.

Answer 2

You can't achieve that because they are part of the same stacking context. However a workaround could be set opacity: 0 to child
#parent {
width: 50px;
height: 50px;
background: red;
position: absolute;
z-index: 1;
}
#child {
width: 50px;
height: 50px;
background: blue;
position: absolute;
z-index: 2;
opacity: 0;
}
<div id='parent'>
<div id='child'></div>
</div>

Answer 3

AFAIK it's not possible to position a parent on top of a child. Without changing the HTML you can however use:before or :after to create a new element and position that on top of the child;
#parent:after {
background: red;
content: "ON TOP";
display: block;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
http://jsfiddle.net/j6e9qho3/12/
Edit: Or seeing as the effect of the parent being on top of the child is that the child isn't visible at all, the easiest thing to do is probably #child {display: none}. But I assume that doesn't work for you for other reasons.
Perhaps if you explained what you want to accomplish we could be of more help.

Answer 4

I was able to achieve what I wanted by dealing with siblings inside the parent...
<div id='parent'>
<div id='child1'>
</div>
<div id='child2'>
</div>
</div>
where parent is a transparent container with its own z-index, but the children are the actual color squares that are drawn (each with their own z-index).