jQuery 动画，css position 导致的问题

刚学 jQuery，请问为什么大图片加了 position: absolute 后，鼠标移动到达摩身上，小图片会等大图片淡出后，才消失？这样大图片会等小图片消失后向左跳跃。请解释一下 position 导致这个问题的原因

position只是用于定位而已，表示大图片是绝对定位(表示元素在移动位置的时候，是相对于它祖先元素来说)，大图片会等小图片消失后向左跳跃应该是由jq的动画事件控制的，比如通过对鼠标的监听实现：

$("div").hover(function() {
  $("img.small").fadeOut(); // 小图片渐隐
  $("img.big").animate({"right" : "100px"}, "slow"); // 大图片缓慢向左移动100像素
}, function() {
  $("img.small").fadeIn(); // 小图片渐现
  $("img.big").animate({"left" : "100px"}, "slow"); // 大图片缓慢向右移动100像素
})

在CSS中，position: absolute可以让元素脱离正常的文档流，而是相对于最近的非static定位的父元素或根元素进行定位。当在大图片中设置了position: absolute，并且鼠标移动到大图片上时，可能会触发鼠标移动事件，而此时大图片定位的位置已经不再占用它原本在文档流中的位置。因此，当小图片依然相对于大图片的原位置进行定位时，由于大图片定位的位置改变了，小图片的位置也会改变，出现“跳跃”的情况。
解决此问题的方法是，可以为大图片设置一个父元素，将position: absolute的属性应用于父元素而非大图片本身。这样，大图片定位的位置仍然在文档流中，而小图片的相对位置不会发生改变，也就不会出现“跳跃”的情况。同时，为了确保大图片覆盖在小图片上方，可以为大图片设置z-index属性。