HTML元素的位置相關(guān)的css屬性有top、left、bottom、right。要靈活使用這些屬性，需要了解css的定位模型position：正常文檔流，相對定位，絕對定位。

成都創(chuàng)新互聯(lián) - 眉山服務(wù)器托管，四川服務(wù)器租用，成都服務(wù)器租用，四川網(wǎng)通托管,綿陽服務(wù)器托管，德陽服務(wù)器托管，遂寧服務(wù)器托管，綿陽服務(wù)器托管，四川云主機，成都云主機，西南云主機，眉山服務(wù)器托管，西南服務(wù)器托管，四川/成都大帶寬，成都機柜租用，四川老牌ＩＤＣ服務(wù)商

了解了這些css知識才更清楚jQuery的position及offset的區(qū)別。

jQuery中提供了獲取設(shè)置HTML元素位置的接口方法。如下

.offset()

.position()

.offsetParent()

.scrollTop()

.scrollLeft()

所有位置相關(guān)的代碼在項目的offset.js中，總共250行代碼。里面還有些未公開的方法，如

getOffset()

getWindow()

jQuery.offset.bodyOffset()

jQuery.offset.setOffset()

它們之間的關(guān)系如下

 從圖中可以看到兩個重要的函數(shù).offset()和.position()都依賴于私有的getOffset()。

.position()還依賴于.offsetParent()。offsetParent通過while循環(huán)獲取最近的定位父元素（position為非static值）。

getOffset()函數(shù)根據(jù)瀏覽器是否支持getBoundingClientRect得來。如果支持則使用getBoundingClientRect，否則使用while循環(huán)不斷計算得出位置值。

getBoundingClientRect最早是IE中實現(xiàn)的，后主流瀏覽器都實現(xiàn)了它。因此后面的else判斷基本上用不上，jQuery可考慮去掉該段代碼。

需要注意下.offset()和.position()的區(qū)別

.offset()   相對于document（視口）計算的

.position() 相對于其最近的 定位父元素

此外，.offset()傳入一個對象或函數(shù)時可以設(shè)置元素的位置（setter），而.position()則僅是獲取位置（getter）。

.offset()作為getter時，獲取dispaly:none的元素top，left都將是零。

.offset()作為setter時，如果沒有元素的position（此時值為static），那么.offset()方法會將其設(shè)置為“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 } 
 
 
 
 

相關(guān)：

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

分享題目：jQuery提供的獲取元素位置的接口方法
文章出自：http://uogjgqi.cn/article/coociei.html