offset()和position()用法詳解:
這兩個方法非常的常用，同時掌握起來有些困難，下面就介紹一下這兩個方法的用法。
下面先看一下它們基本的定義:
1.offset()方法的定義:
此方法獲取或者設置匹配元素在當前document的相對偏移。
此方法只對可見元素有效。
當獲取偏移量時，方法的返回值是一個包含兩個整型屬性（top和left）的對象。
設置偏移量時，此方法的參數是帶有top和left屬性的對象。
2.position()方法的定義:
獲取匹配元素相對父元素的偏移。
返回的對象包含兩個整形屬性（top和left）的對象。
為精確計算結果，請在補白、邊框和填充屬性上使用像素單位。
此方法只對可見元素有效。
但是此方法並非只有定義的那麼簡單，在實際應用中，它的返回值也並非只是獲取匹配元素相對父元素的偏移量。
實際上position()方法是將元素以CSS的絕對定位來處理，也就是position屬性值為absolute（當然並不是將元素的的定位方式真的設置為絕對定位），這個時候它的定位參考對象准確的來說應該是距離它最近的一個擁有定位的父元素，和CSS的絕對定位的原則是一樣的。
代碼實例如下:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://hovertree.com/" />
<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="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.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>