使用CSS转换父级移动后保持子位置相同

Question

是否有可能将孩子带到其已转换父级流的外部？下面简单的例子：

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/

非常简单的东西。基本上，使用CSS转换将父级（红色框）向右移动100px。我希望的结果是，孩子（黑匣子）会留在父母移动的地方。

Answer 1

一种选择是加入负translateX的子元素，以使其保持在原来的位置：

Updated Demo

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