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