动画CSS后固定位置错误的元素答案

【问题标题】：fixed element with wrong position after animation CSS动画CSS后固定位置错误的元素
【发布时间】：2013-11-09 16:40:48
【问题描述】：

在这里我创建了jsFiddle，它复制了我的问题

动画后（点击 MOVE 两次），固定列返回错误位置。

是否可以在不使用 left 或 right 的情况下为我的 this 设置动画？

【问题讨论】：

非常适合我
奇怪，在任何浏览器中都不适合我（在 windows 和 linux 上测试）

标签： css css-position css-transforms

【解决方案1】：

更新了 jsfiddle http://jsfiddle.net/z8fBD/7/

技巧是在#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】：

您必须将 margin:0px 和 padding:0px 添加到您的 <body>，因为 position:fixedlead element attop` 不考虑文档的填充和边距。

请在此处查看 JsFiddle Demo

【讨论】：

它应该是固定的））甚至标题都这么说）
您在 css 中有一个拼写错误，它不适用于（我猜）固定位置。一旦我纠正错字，它就不起作用了
@Branwo 请立即查看。但是你必须给你的身体赋予风格，因为固定的位置会自动导致顶部位置
好的，抱歉。我也在 Safari 而不是 Chrome 上试过这个，效果很好......
感谢它的工作，但有一个问题.. Wrapper 不在正文中，而是在另一个 div 中，即margin: 0 auto。我们可以解决这个问题吗？

【解决方案3】：

删除“位置：固定；”来自#fixed 风格，它工作正常......

【讨论】：

它应该是固定的））甚至标题都这么说）