如何在尝试使用jquery进行动画处理时定位html元素？

Question

我为我的网站制作了一个按钮，其中div带有背景图片。我使用jQuery动画那个按钮，这样当鼠标悬停按钮时，它会向右跳20px，当鼠标离开时，它会回到之前的位置。

问题是，当我放大（ ctrl + scroll ）时，整个动画变得一团糟。按钮从左向右快速移动，当然不是它应该在的位置。

我使用relative位置和像素单位来定位元素。

我该如何定位？ absolute或relative？像素或百分比？

Answer 1

最好的办法是只使用CSS。它很整洁，做得很好。这是一个演示

http://jsfiddle.net/kevinPHPkevin/GyVTZ/

img {
    margin-top:20px;
}
img:hover {
    margin-top:10px;
}

Answer 2

这article解释绝对和相对，他们如何不同？我的做法是wrap我的absolute relative

示例：

HTML

<div class="wrap">
  <div class="content">
  </div>
</div>

CSS

.wrap {
  float:left;
  position:relative
}
.content {
  position:absolute;
  top:10px;
  left:10px
}