前言

position 里面有一个属性叫 relative，可以让物件根据原本的位置进行移动

transform 里面也有一个属性叫 translate ，也可以让物件根据原本的位置进行移动

分享

一开始只以为是行数多跟行数少的差别
两个都可以移动有什麽差别嘛!?
对初学者来说真是雾煞煞摸不清楚，哪个顺手就用哪个呗!
後来发现还是以当下的状况来判断比较好呀

position 要透过top、bottom、left、right 来推位置

  position: relative;
  top: 200px;
  left: 300px;

transform: translate(X,Y) 则只需要一行

   transform: translate(300px,200px);

对懒人来说，transform 真棒啊~

但最重要的是在动画上会有些许的差异呢
仔细看看这两个圆，会发现用 relative 做出来的似乎在微微的抖动
而用translate做出来的运行则顺滑的多了

codepen实作

这种情况在动画时间长秒数且缓慢运行的状况会更明显

结论

很难说用哪个来运行会是绝对正确的
使用时还是要根据当下的情况判断
若是遇到物件本身位置需要推移且需要加入动画效果的情况
将position: relative;用来推移位置，
transform: translate(X,Y)则留做动画使用会顺很多~