獲取位置有 offset 與 position兩個(gè)方法。
offset()
方法允許我們檢索一個(gè)元素相對于文檔（document）的當(dāng)前位置，它和.position()的差別在于：.position()是相對于相對于父級元素的位移。
當(dāng)通過全局操作（特別是通過拖拽操作）將一個(gè)新的元素放置到另一個(gè)已經(jīng)存在的元素的上面時(shí)，若要取得這個(gè)新的元素的位置，那么使用 .offset() 更合適。
jQuery不支持獲取隱藏元素的偏移坐標(biāo)。同樣的，也無法取得隱藏元素的 border, margin, 或 padding 信息。位置的方法沒有像witdh/height一樣去修復(fù)了 display:none 的情況。所以針對offset的定義是相對文檔的，傳統(tǒng)來說用offsetLeft和offsetTop是可以的，但是兼容各種瀏覽器以及各種不同的元素就會把你弄死，而且效率還非常低下。所以獲取頁面上某個(gè)元素相對于瀏覽器窗口的偏移量就成了getBoundingClientRect的用武之地了，但是還是會有一些兼容性的問題的。
在具體表現(xiàn)方面，F(xiàn)irefox6以前的版本使用getBoundingClientRect時(shí)不能獲取到top和bottom這兩個(gè)屬性值，F(xiàn)irefox6及以后的版本和其他支持getBoundingClientRect方法的瀏覽器則top、left、right、bottom四個(gè)屬性值均能獲取到。需要說明的是由于某些版本的IE瀏覽器的<html>文檔根元素默認(rèn)是有2px邊框的,所以這里需要特別處理一下，微軟MSDN上說在IE5中會存在這樣的情況，我們只要把得到的值減去html根元素（body也可考慮進(jìn)來）的clientLeft或clientTop就能保持各瀏覽器一致啦。
top: box.top + win.pageYOffset - docElem.clientTop, left: box.left + win.pageXOffset - docElem.clientLeft
position()
.position()方法可以取得元素相對于父元素的偏移位置。與.offset()不同， .offset()是獲得該元素相對于documet的當(dāng)前坐標(biāo)，當(dāng)把一個(gè)新元素放在同一個(gè)容器里面另一個(gè)元素附近時(shí)，用.position()更好用。.position()返回一個(gè)包含 top 和 left 屬性的對象.Position是一個(gè)相對父元素的定位所以實(shí)際的距離還要跟當(dāng)然用了定位的屬性有關(guān)系。
我們分析下幾種情況：
Fixed：生成絕對定位的元素，相對于瀏覽器窗口進(jìn)行定位，明顯這樣的定位的父元素就的文檔了，也就沒有父元素的相對點(diǎn)，但實(shí)際上我們根據(jù)盒子模型來算的話，實(shí)際上的定位出了left還有一個(gè)margin是會影響結(jié)果的，所以真實(shí)的定位值。
Left = ele.offset().left –jQuery.css(elem, " marginLeft ", true) Top = ele.offset().top –jQuery.css(elem, " marginTop", true)
這樣的算法才是精確的。
如果元素采用了Static、absolute、relative屬性，那么都是跟定位有關(guān)系，都有父級的相對點(diǎn)，這樣我們可以通過獲取元素的offsetParent得到最近的父元素。這樣的算法就比較簡單了，我們可以獲取元素相對文檔的最真實(shí)的坐標(biāo)減去父節(jié)點(diǎn)相對文檔的坐標(biāo)，這里涉及了2個(gè)元素的盒子模型所以都需要加上影響的屬性。父節(jié)點(diǎn)的精確值要加上border的處理。
parentOffset.top += jQuery.css(offsetParent[0], "borderTopWidth", true); parentOffset.left += jQuery.css(offsetParent[0], "borderLeftWidth", true);
所以最終的計(jì)算公式：
top: offset.top - parentOffset.top - jQuery.css(elem, "marginTop", true), left: offset.left - parentOffset.left - jQuery.css(elem, "marginLeft", true)
請驗(yàn)證，完成請求
由于請求次數(shù)過多，請先驗(yàn)證，完成再次請求
打開微信掃碼自動(dòng)綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報(bào)
