有关absolute和relative的不解

代码如图。本来想练个简单的动画效果的，但是图一把主盒子的定位改成相对定位后，结果动画效果就跟抽了风一样，先是往左平移，然后又猛地回到原地进行下一步的动画，而改成相对定位后就变正常了，请问这是为什么啊？

relative 是不脱离标准文档，以自身的位置偏移
absolute 脱离标准文档；根据有relative的父元素，没有就根据页面的0，0 位置偏移

把父元素设置为相对定位relative，子元素设置为绝对定位absolute，就相当于子元素以父元素为参照物进行定位