[JQuery] Position: absolute與relative在不同縮放比網頁中的位移

簡單的說，就是網頁上用animate()來達到Element位移時，在網頁縮放比例不一的情況下出了問題。以下為animate()中提供的一個簡單範例：

在網頁中，要使用jqeuery來製作動畫，大家第一個想到的應該是animate()這個method，再配上不同的Effects，其實大部份的動畫都可以用animate來達成，包括Element的位移及變化。
animate()的使用非常多元，一些簡單的形變及位移，可以參考網頁上範例。 animate() | Jquery API Documentation
但是在我用animate()非常高興的時候，他卻出了一個trouble。以下是一個animate()的範例：

上面那段程式碼簡單的創造了兩個按鈕，分別使block元件向左及向右位移50px。
而這種寫法與網頁縮放比是無關的，不管你將網頁的縮放如何調整，左右位移的距離都不會改變，而前提是該元件的Position設定為absolute。
發現了這件事之後，我花了一點時間去弄懂到底Position各種設定的差別。一般來說，Position的設定有四種：
Static（靜態）：此為預設值，如未設定則皆屬靜態，設定後，元件設定之top、right、bottom、left皆為無效。
Relative（相對定位）：相對於另一區塊為其本身的位置，設定的top、right、bottom、left亦相對於另一區塊偏移。
Absolute（絕對定位）：脫離原本的排列位置，如果該區塊沒有父區塊或父區塊沒有設定position，則以body標籤的左上角定位為起點；若有，其父區塊設定為absoulte或relative，則以父區塊的邊框為定位起點。
Fixed（固定定位）：不管父區塊如何設定，其定位起點永遠以body為定位起點。若要設定固定區塊位置與網頁滑動一起移動可用此定位。

所以，當上述block之position設定為absolute，可以非常愉快的使用animate()去做區塊的位移，但是當設定為relative，就是悲劇的開始。
我設定了兩個block來試驗。

分別設定他們的CSS如下：

.block1 {
  position:absolute;
  background-color:#abc;
  left:50px;
  top: 50px;
  width:90px;
  height:90px;
}
.block2 {
  position:relative;
  background-color:#123;
  left:50px;
  top: 150px;
  width:90px;
  height:90px;
}

block1設定為absolute，block2設定為relative。
兩個block的起始left都是50px。在縮放比100%的情形下，兩個block的運作都很正常。
在縮放比110%的時候，設定為relatve的block2開始亂跑…，當按了第一次向右滑動50px之後，block位置顯示如下：

再按一次向左滑動後，block位置又起了變化：

兩個分別設定為absolute和relative的div，在不同縮放比例的網頁中，relative設定的div，其原本位置的值會被改變，也就是說，改變的不是位移的距離，而是位置的本身，所以我們以此計算位置。
原來位置是50px，當放大了110%變為55px，再向右位移50px，所以最後位置是105px；然後再由105px向左移50px，105px又被放大110%，所以是115.5px，向左位移50px後，變為65.5px，以此類推。
而我們使用的是animate()，在動畫產生的過程中，會先長大，再位移，所以動畫效果的呈現會是50px->55px，再位移50px（50px->55px這個改變沒有動畫效果，會是瞬間位移），當數字越來越大，位移的動作就越來越明顯，整個動畫呈現也很怪異。所以如果要做類似位移效果的動畫時，盡量避免將區塊設定為relative。