jQuery offset()和position()区别
在
jQuery中有两个获取元素位置的方法offset()和position()。position()方法是在1.2.6版本之后加入的，为什么要引入
这个方法呢？这两个方法之间有什么异同？使用的时候应该注意哪些问题？什么时候使用offset(),什么时候又使用position()呢？
先看看API对这这两个方法的定义：
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
};
注意最后那段 代码：
results = {
top: offset.top- parentOffset.top,
left: offset.left - parentOffset.left
};
代码的意思就是获取本身元素距离它的父元素的距离。
