html - 通过 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);
}