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

Do you mean the move 'button' should stay put? If so, you need to apply the transform to the container element since the body (you should consider renaming this div) will transform all its children. Here are the changes to do that:

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);

The rest of the CSS stays the same. Note how styles that were on the body were moved to #container.