jquery对象的position和offset方法理解

jquery提供了两个方法来获取页面的位置信息，offset方法能够得到元素的绝对位置，position方法是取原始的相对信息，方法返回是一个map对象，key分别是left和top。例如，$(‘#test’).offset().left 得到是id为test的元素距页面左边的像素。

何为绝对位置，何为相对位置呢？不管相对还是绝对，都有一个参照点，对于绝对位置比较简单，它的参照点永远是页面的左上角（注意：body默认是margin值的，如果没有手工修改此值，参照点不是正左上角，会有几个像素的偏移）；相对位置的参照点就比较麻烦，很多地方都说相对父元素左上角，那究竟哪个算父元素呢？这个父元素并不一定是该元素的直接父元素，有可能是父元素的父元素，甚至可能的参考点是页面的左上角，父元素的定义是它的所有上层元素中第一个（距离本元素最近）css style中设置了position属性的元素，如果所有上级元素都没有设置该属性，那么参照点就是页面的左上角，跟offset一致了。

例如代码：

<div style="padding: 10px;border:1px solid; position: relative;width:180px;">
	<div style="padding: 10px;position: relative;border:1px solid;">
		<div id="test" style="background-color: #000;width: 20px;height: 20px;"></div>
	</div>
</div>

这时id为test的div的相对位置的参照点就是他直接父元素，所以得到的left,top都为10，而下面的代码

<div style="padding: 10px;border:1px solid; position: relative;width:180px;">
	<div style="padding: 10px;border:1px solid;"><!-- 注意没有设置position -->
		<div id="test" style="background-color: #000;width: 20px;height: 20px;"></div>
	</div>
</div>

此时参照点就是最外层的div，因此left、top的值为21px，即10 + 1 + 10,10是padding，1是border的

原文链接地址：http://www.netingcn.com/jqueryposition-offset.html