jQuery提供的獲取元素位置的接口方法
HTML元素的位置相關的css屬性有top、left、bottom、right。要靈活使用這些屬性，需要了解css的定位模型position：正常文檔流，相對定位，絕對定位。
了解了這些css知識才更清楚jQuery的position及offset的區別。
jQuery中提供了獲取設置HTML元素位置的接口方法。如下
.offset()
.position()
.offsetParent()
.scrollTop()
.scrollLeft()
所有位置相關的代碼在項目的offset.js中，總共250行代碼。里面還有些未公開的方法，如
getOffset()
getWindow()
jQuery.offset.bodyOffset()
jQuery.offset.setOffset()
它們之間的關系如下
從圖中可以看到兩個重要的函數.offset()和.position()都依賴于私有的getOffset()。
.position()還依賴于.offsetParent()。offsetParent通過while循環獲取最近的定位父元素（position為非static值）。
getOffset()函數根據瀏覽器是否支持getBoundingClientRect得來。如果支持則使用getBoundingClientRect，否則使用while循環不斷計算得出位置值。
getBoundingClientRect最早是IE中實現的，后主流瀏覽器都實現了它。因此后面的else判斷基本上用不上，jQuery可考慮去掉該段代碼。
需要注意下.offset()和.position()的區別
.offset() 相對于document（視口）計算的
.position() 相對于其最近的 定位父元素
此外，.offset()傳入一個對象或函數時可以設置元素的位置（setter），而.position()則僅是獲取位置（getter）。
.offset()作為getter時，獲取dispaly:none的元素top，left都將是零。
.offset()作為setter時，如果沒有元素的position（此時值為static），那么.offset()方法會將其設置為“relative”以相對于視口進行重新定位。如下
- 1 // set position first, in-case top/left are set even on static elem
- 2 if ( position === "static" ) {
- 3 elem.style.position = "relative";
- 4 }
相關：
http://www.w3.org/TR/cssom-view/#the-getclientrects
https://developer.mozilla.org/en/DOM/element.getBoundingClientRect
http://msdn.microsoft.com/en-us/library/ms536433%28VS.85%29.aspx
原文鏈接：http://www.cnblogs.com/snandy/archive/2012/04/23/2455787.html
