fixed element with wrong position after animation CSS

问题

Here I created jsFiddle which kind of replicates my problem

After animation (clicking on MOVE twice), fixed column comes back with wrong position.

is it possible to animate my this without using left or right for fixed positioned element?

回答1:

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

Trick is to add reset translate on #body

#body {
    position:absolute;
    left: 0;
    top:0;
    width: 200px;
    -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);
}

回答2:

You have to add margin:0px and padding:0px to your <body> because position:fixedlead element attop` without considering padding and margin with document.

Please check here JsFiddle Demo