參考別人寫得比較明白的，紅色部分為重點吧：
使用jQuery獲取元素位置時，我們會使用position()或offset()方法，兩個方法都返回一個包含兩個屬性的對象－左邊距和上邊距，它們兩個的不同點在於位置的相對點不同。
可以看看下邊的圖：
從圖中我們可以大體看出兩者的區別。
position()獲取相對於它最近的具有相對位置(position:relative)的父級元素的距離，如果找不到這樣的元素，則返回相對於瀏覽器的距離。
offset()始終返回相對於瀏覽器文檔的距離，它會忽略外層元素
下邊看個簡單的例子，這里外層的div元素(position:relative)僅一個：
<divid="outer"style="width:200px;position:relative;left:100px;"><divid="inner"style="position:absolute;left:50px;top:60px;"></div></div>//獲取相對於最近的父級(position:relative)的位置var vposition = $("#inner").position(); alert(vposition.left);//輸出：50 alert(vposition.top);//輸出：60var voffset = $("#inner").offset(); alert(voffset.left);//輸出：$("#outer").offset().left+50 alert(voffset.top);//輸出：$("#outer").offset().top+60在不同瀏覽器中,offset()得到的相對於瀏覽器的位置不同，相信你看了上邊相應的注釋，已經掌握了position()同offset()方法的區別。
原文：http://www.jquery001.com/position()-offset().html
event.clientX 相對文檔的水平座標
event.clientY 相對文檔的垂直座標（若在iframe中會有下拉框，相當於可見部分的垂直坐標）
event.offsetX 相對點擊容器的水平坐標
event.offsetY 相對點擊容器的垂直坐標
event.screenY 相對整個屏幕的垂直坐標
$(document).scrollTop(); //垂直滾動距離
$(XX).outerWidth() 對象寬度，包括padding
$(XX).outerHeight() 對象高度，包括padding
$(XX).offset().top; // 元素相對於document的上位移