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

i have 2 divs, need visually placing parent div on top (covering) child div.

i read other questions, aware child on different flow, understand solution place parent , child on same level, nevertheless interested know if there workaround/hacks make trick.

i targeting latest version of chrome , firefox, solution css3 welcome.

notes:

• i need keep z:index on parent.
• in real code parent transparent, need grab user interecation.
• child cannot hidden, must 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; } 

remove z-index #parent , change z-index of child -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; }