距離上一次源碼閱讀近一年了，這時已經更新到了1.7.2。
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 }
相關：