Jquery中的offset()和position()深入剖析

先看看這兩個方法的定義。
offset():
擷取匹配元素在當前視口的相對位移。
返回的對象包含兩個整形屬性：top 和 left。此方法只對可見元素有效。
position():
擷取匹配元素相對父元素的位移。
返回的對象包含兩個整形屬性：top 和 left。為精確計算結果，請在補白、邊框和填充屬性上使用像素單位。此方法只對可見元素有效。
真的就這麼簡單嗎？實踐出真知。
先來看看在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
};

點擊下面的頁面可以測試一下兩個的區別： xmlns="http://www.w3.org/1999/xhtml">

父容器的position是預設值，也就是static,子容器的position為預設值，也是static,這個時候，offset和position值相同

父容器的position是相對定位，也就是ralative,子容器的position為預設值，也是static,這個時候，offset和position值不同

父容器的position是絕對位置，也就是absolute,子容器的position為預設值，也是static,這個時候，offset和position值不同

playgoogle.com