(1)jQuery中的：offset()方法
獲取匹配元素在當前視口的相對偏移。
返回的對象包含兩個整形屬性：top 和 left。此方法只對可見元素有效。
(2jQuey中的: position()方法
獲取匹配元素相對父元素的偏移。
返回的對象包含兩個整形屬性：top 和 left。為精確計算結果，請在補白、邊框和填充屬性上使用像素單位。此方法只對可見元素有效。
也就是元素B距離元素A的距離。
在沒有position()方法之前，計算B到A的距離 只有通過 先計算B距瀏覽器左邊距 減去 A的。
有了position()方法之后，就可以快速計算出來。
注：
1，使用position()方法時事實上是把該元素當絕對定位來處理，獲取的是該元素相當於最近的一個擁有絕對或者相對定位的父元素的偏移位置。
2，使用position()方法時如果其所有的父元素都為默認定位（static）方式，則其處理方式和offset()一樣，是當前窗口的相對偏移。
3，使用offset()方法不管該元素如何定位，也不管其父元素如何定位，都是獲取的該元素相對於當前視口(瀏覽器的顯示區域)的偏移。
1，要顯示的元素B存放在DOM的最頂端或者最底端（即其父元素就是body）。這個時候用offset()是最好的。
元素B都存放在Dom 結構的最下面，由於其父元素就是BODY，所以，不管元素A如何定位，只要找的A相當與整個窗口的偏移位置，就可以解決問題。
2，若要顯示的元素B存放在元素A的同一父元素下（即B為A的兄弟節點），這個時候使用position() 是最合適的。
那么我現在問你，如果我打算做一個跟隨屏幕滾動的層，使用哪個方法呢？
如果你答得是：offset()，那么恭喜你。
如果我打算做一個類似於幻燈片的效果，你會使用哪個方法呢？
綜上所述，使用position()還是offset()取決於你被控制的元素B DOM所在的位置。
再次形象的描述：
使用jQuery獲取元素位置時，我們會使用position()或offset()方法，兩個方法都返回一個包含兩個屬性的對象－左邊距和上邊距，它們兩個的不同點在於位置的相對點不同。
可以看看下邊的圖：
從圖中我們可以大體看出兩者的區別。position()獲取相對於它最近的具有相對位置(position:relative)的父級元素的距離，如果找不到這樣的元素，則返回相對於瀏覽器的距離。
offset()始終返回相對於瀏覽器文檔的距離，它會忽略外層元素。
下邊看個簡單的例子，這里外層的div元素(position:relative)僅一個：
1 1 <div id="outer" style="width:200px;position:relative;left:100px;"> 2 2 <div id="inner" style="position:absolute;left:50px;top:60px;"> 3 3 </div> 4 4 </div> 5 5 6 6 //獲取相對於最近的父級(position:relative)的位置 7 7 var vposition = $("#inner").position(); 8 8 alert(vposition.left); //輸出：50 9 9 alert(vposition.top); //輸出：60 10 10 11 11 var voffset = $("#inner").offset(); 12 12 alert(voffset.left); //輸出：$("#outer").offset().left+50 13 13 alert(voffset.top); //輸出：$("#outer").offset().top+60
在不同瀏覽器中,offset()得到的相對於瀏覽器的位置不同，相信你看了上邊相應的注釋，已經掌握了position()同offset()方法的區別。
補充：
用原生js中的方法：
1 window.getComputedStyle("element").left/top;