在jQuery中有兩個(gè)獲取元素位置的方法offset()和position()。position()方法是在1.2.6版本之后加入的，為什么要引入這個(gè)方法呢？這兩個(gè)方法之間有什么異同？使用的時(shí)候應(yīng)該注意哪些問(wèn)題？什么時(shí)候使用offset(),什么時(shí)候又使用position()呢？
先看看API對(duì)這這兩個(gè)方法的定義：
offset():
獲取匹配元素在當(dāng)前視口的相對(duì)偏移。
返回的對(duì)象包含兩個(gè)整形屬性：top 和 left。此方法只對(duì)可見(jiàn)元素有效。
position():
獲取匹配元素相對(duì)父元素的偏移。
返回的對(duì)象包含兩個(gè)整形屬性：top 和 left。為精確計(jì)算結(jié)果，請(qǐng)?jiān)谘a(bǔ)白、邊框和填充屬性上使用像素單位。此方法只對(duì)可見(jiàn)元素有效。
真的就這么簡(jiǎn)單嗎？實(shí)踐出真知。
先來(lái)看看在jQuery框架源碼里面，是怎么獲得position()的：
//Get *real* offsetParent
var offsetParent = this.offsetParent(),
//Get correct offsets
offset       = this.offset(),
parentOffset = /^body|html$/i.test(offsetParent[0].tagName)
? { top: 0, left: 0 }
: offsetParent.offset();
//Subtract element margins
//note: when an element has margin: auto the offsetLeft and marginLeft
//are the same in Safari causing offset.left to incorrectly be 0
offset.top  -= num( this, 'marginTop'  );
offset.left -= num( this, 'marginLeft' );
//Add offsetParent borders
parentOffset.top  += num( offsetParent, 'borderTopWidth'  );
parentOffset.left += num( offsetParent, 'borderLeftWidth' );
//Subtract the two offsets
results = {
top:  offset.top  - parentOffset.top,
left: offset.left - parentOffset.left
};
注意最后那段 代碼： results = {
top:  offset.top  - parentOffset.top,
left: offset.left - parentOffset.left
};代碼的意思就是獲取本身元素距離它的父元素的距離。
用圖如下所示：

也就是元素B距離元素A的距離。
在沒(méi)有position()方法之前，計(jì)算B到A的距離 只有通過(guò) 先計(jì)算B距瀏覽器左邊距 減去 A的。
有了position()方法之后，就可以快速計(jì)算出來(lái)。不過(guò)在使用position()之前，你需要了解一
下它們的定位方式。

可以看一下測(cè)試?yán)?： 點(diǎn)擊這里瀏覽例子l

通過(guò)例子1頁(yè)面測(cè)試的結(jié)果可以得出這個(gè)結(jié)論：

1，使用position()方法時(shí)事實(shí)上是把該元素當(dāng)絕對(duì)定位來(lái)處理，獲取的是該元素相當(dāng)于最近的一個(gè)擁有絕對(duì)或者相對(duì)定位的父元素的偏移位置。
2，使用position()方法時(shí)如果其所有的父元素都為默認(rèn)定位（static）方式，則其處理方式和offset()一樣，是當(dāng)前窗口的相對(duì)偏移。
3，使用offset()方法不管該元素如何定位，也不管其父元素如何定位，都是獲取的該元素相對(duì)于當(dāng)前視口的偏移。

知道了這些特點(diǎn)后，相信你對(duì)它們已經(jīng)熟悉了。進(jìn)一步那么我們應(yīng)該如何來(lái)合理的使用position()和offset()呢？


就我個(gè)人的經(jīng)驗(yàn)，通常獲取一個(gè)元素A的位置是為了讓另外的一個(gè)元素B正好出現(xiàn)在A元素的附近。通常有2種情況：

1，要顯示的元素B存放在DOM的最頂端或者最底端（即其父元素就是body）。這個(gè)時(shí)候用offset()是最好的。
示例驗(yàn)證：
用offset 正常顯示的例子 ： 點(diǎn)擊查看例子2
用position無(wú)法正常顯示的例子 ： 點(diǎn)擊查看例子3
在以上兩個(gè)例子中，元素B都存放在Dom 結(jié)構(gòu)的最下面，由于其父元素就是BODY，所以，不管元素A如何定位，只要找的A相當(dāng)與整個(gè)窗口的偏移位置，就可以解決問(wèn)題。

2，若要顯示的元素B存放在元素A的同一父元素下（即B為A的兄弟節(jié)點(diǎn)），這個(gè)時(shí)候使用position() 是最合適的。
用position正常顯示的例子 ：點(diǎn)擊查看例子4
用offset五法正常顯示的例子：點(diǎn)擊查看例子5

那么我現(xiàn)在問(wèn)你，如果我打算做一個(gè)跟隨屏幕滾動(dòng)的層，使用哪個(gè)方法呢？
如果你答得是：offset()，那么恭喜你。
如果我打算做一個(gè)類似于幻燈片的效果，你會(huì)使用哪個(gè)方法呢？

綜上所述，使用position()還是offset()取決于你被控制的元素B DOM所在的位置。

it知識(shí)庫(kù)：關(guān)于jQuery中的offset()和position()，轉(zhuǎn)載需保留來(lái)源！

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。