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

// from http://www.playgoogle.com/post/82.html

jquery 中有两个获取元素位置的方法offset()和position()，这两个方法之间有什么异同？使用的时候应该注意哪些问题？什么时候使用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
            };