offset()和position()用法详解:
这两个方法非常的常用，同时掌握起来有些困难，下面就介绍一下这两个方法的用法。
下面先看一下它们基本的定义:
1.offset()方法的定义:
此方法获取或者设置匹配元素在当前document的相对偏移。
此方法只对可见元素有效。
当获取偏移量时，方法的返回值是一个包含两个整型属性（top和left）的对象。
设置偏移量时，此方法的参数是带有top和left属性的对象。
具体用法可以参阅jQuery的offset()方法一章节。
2.position()方法的定义:
获取匹配元素相对父元素的偏移。
返回的对象包含两个整形属性（top和left）的对象。
为精确计算结果，请在补白、边框和填充属性上使用像素单位。
此方法只对可见元素有效。
具体用法可以参阅jQuery的position()方法一章节。
但是此方法并非只有定义的那么简单，在实际应用中，它的返回值也并非只是获取匹配元素相对父元素的偏移量。
实际上position()方法是将元素以CSS的绝对定位来处理，也就是position属性值为absolute（当然并不是将元素的的定位方式真的设置为绝对定位），这个时候它的定位参考对象准确的来说应该是距离它最近的一个拥有定位的父元素，和CSS的绝对定位的原则是一样的，可以参阅position绝对定位以哪个对象为参考一章节。
代码实例如下:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.51texiao.cn/" />
<title>offset()和position()用法详解-蚂蚁部落</title>
<style type="text/css">
body{
margin:15px;
width:960px;
}
.parent{
border:3px solid #ccc;
width:600px;
height:300px;
margin-left:55px;
padding:25px;
}
.child{
background:#666;
width:200px;
height:200px;
color:#fff;
}
.copyright{
position:absolute;
right:0;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".child").each(function(){
var text = "position().left="+$(this).position().left;
text +="<br>position().top="+$(this).position().top;
text +="<br>offset().left="+$(this).offset().left;
text +="<br>offset().top="+$(this).offset().top;
text +="<br>其parent的offset().top="+$(this).parents(".parent").offset().top;
text +="<br>其parent的offset().left="+$(this).parents(".parent").offset().left;
$(this).html(text);
})
})
</script>
</head>
<body>
<div class="parent" style="float:right">
父容器的position是默认值，static。子容器的position为默认值，static。offset和position值相同
<div class="child"></div>
</div>
<div style="clear:both"></div>
<div class="parent" style="position:relative">
父容器的position是相对定位ralative,子容器的position为默认值static。offset和position值不同
<div class="child"></div>
</div>
<br/>
<div style="position:absolute;padding:15px;border:3px solid #ff0000;">
<div class="parent">
祖父容器的position是绝对定位absolute,子容器的position为默认值static。offset和position值不同
<div class="child"></div>
</div>
</div>
</body>
</html>
最后总结:
1.offset()方法获取的是匹配元素相对于文档的偏移量，和对象本身和父元素的定位方式是无关的。
2.position()方法稍稍复杂一些:
1).如果祖辈元素中有采用绝对定位或者相对定位者，则此方法获取的偏移量将以最近的采用定位的的祖辈元素为参考。
2).如果祖辈元素中没有采用绝对定位或者相对定位者，则此方法获取的偏移量将以窗口为参考对象。