html - Keep child position the same after parent moved with CSS transform -

is possible take child outside of flow of transformed parent? simple example below:

html:

<div class="parent">     <div class="child"></div> </div> <a href="#" id="button">move parent</a> 

css:

.parent {     background: red;     height: 200px;     position: relative;     transition: 0.5s ease-in-out;     width: 200px; }  .child {     background: black;     height: 100px;     left: 0;     top: 0;     position: absolute;     width: 100px; }  .moved {     transform: translatex(100px); } 

javascript:

$('#button').on('click', function(e) {     e.preventdefault();     console.log('test');     $('.parent').toggleclass('moved'); }); 

jsfiddle: http://jsfiddle.net/ous3s873/1/

very simple stuff. basically, parent (red box) being moved 100px right using css transform. desired output child (black box) stay in same place parent moves behind it.

one option adding negative translatex child element in order make stay @ place:

updated demo

.moved .child {     transform: translatex(-100px); }