Is it possible to change z-index for a child element of a div even with some workarounds or hacks?

Question

I have two divs, I need to visually placing the parent div on top (covering) the child div.

I read other questions, an I am aware that child is on a different flow, also I understand that the easily solution would be to place parent and child on the same level, nevertheless I am interested to know if there is any workaround/hacks that could make the trick.

I targeting only the latest version of Chrome and Firefox, any solution CSS3 also is welcome.

Notes:

• I need to keep the z:index on the parent.
• In my real code the parent is transparent, it need to grab user interecation.
• Child cannot be hidden, must be visible.

http://jsfiddle.net/qn3n4ynw/1/

<div id="parent">
    <div id="child"></div>
</div>

#parent {
    position:absolute;
    width:100px;
    height:100px;
    background-color:red;
    z-index: 100;
}
#child {
    position:absolute;
    width:50px;
    height:50px;
    background-color:green;
    z-index: 1;
}

Answer 1

Remove z-index from #parent and change z-index of child to -1

DEMO HERE

#parent {
    position:absolute;
    width:100px;
    height:100px;
    background-color:red;
}
#child {
    position:absolute;
    width:50px;
    height:50px;
    background-color:green;
    z-index: -1;
}

Answer 2

I would not recommend to put a child div behind a parent div. Probable solution would be (if the parent is grater than the child and covering it entirely which is the case due to the above CSS):

make the child invisible and visible again

jQuery("child_selector").toggle(duration, function () { ... on complete });

Edit :

working demo here