前言

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)則留做動畫使用會順很多~