html - CSS Transform conflict with fixed element

Question

Follow up on this topic

When I apply css transform to parent element, child element is not fixed anymore.

http://jsfiddle.net/z8fBD/7/

have tried using only one direction transform but no success.

when you remove transform: translate(0%,0px); everything works just fine, but as you will understand from previous topic, I need this for my animation

Answer 1

你的意思是移动“按钮”应该留在原地吗？如果是这样，您需要将转换应用于容器元素，因为主体（您应该考虑重命名此 div）将转换其所有子元素。以下是为此所做的更改：

JS：

jQuery(document).ready(function($){
    $('#move').click(function(){
        if(!$('#container').hasClass('move')){
            $('#container').addClass('move');
        } else {
            $('#container').removeClass('move');
        }
    })
})

CSS：

#body {
    position:absolute;
    left: 0;
    top:0;
    width: 200px;
}
#container {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
    -webkit-transform: translate(0%,0px);
    -moz-transform: translate(0%,0px);
    -ms-transform: translate(0%,0px);
    -o-transform: translate(0%,0px);
    transform: translate(0%,0px);
}
#container.move {
    -webkit-transform: translate(150%,0px);
    -moz-transform: translate(150%,0px);
    -ms-transform: translate(150%,0px);
    -o-transform: translate(150%,0px);
    transform: translate(150%,0px);

CSS 的其余部分保持不变。注意 body 上的样式是如何移动到 #container 的。