jquery中jquery.offset().top / left用於獲取div距離窗口的距離，jquery.position().top / left 用於獲取距離父級div的距離（必須是絕對定位的div）。
（1）先介紹jquery.offset().top / left
css：
. 代碼如下:
*{ margin: 0px; padding: 0px; }
div{ margin: 0px auto; }
.a{ width: 960px; height: 200px; }
.parentBox{ padding: 30px; margin-top: 40px; width: 960px; height: 300px; }
.innerBox{ padding: 20px; margin-top: 10px; width: 400px; height: 100px; }
html:
. 代碼如下:
<body>
<div class="a"> a<div>
<div class="parentBox">
<div class="innerBox">innerBox</div>
</div>
</body>
js:
. 代碼如下:
$(function(){
var_offsetTop = $(".innerBox").offset().top; //280px
})
這裡的280px= a.height/200px + parentBox.padding-top/30px + parentBox.margin-top/40px + innerBox.margin-top/10px;
//如果這邊parentBox設置position： relative； innerBox設置position：absolute；並且innerBox設置了top： 40px；
//此時_offsetTop的值為290px = a.height/200px + parentBox.margin-top/40px + innerBox.margin-top/10px + ineBox.top/40px;
//因為絕對定義是以父級div的左上角的內邊框為參考坐標的。
//如果innerBox設置了邊框的話還要加上邊框的值
（2）jqury.position().top /left用於獲取子div距離父級div的距離，並且子div必須是絕對定位
css：
. 代碼如下:
*{ margin: 0px; padding: 0px; }
div{ margin: 0px auto; }
.a{ width: 960px; height: 200px; }
.parentBox{ padding: 30px; margin-top: 40px; width: 960px; height: 300px; position: relative; }
.innerBox{ padding: 20px; margin-top: 10px; width: 400px; height: 100px; position: absolute; }
html:
. 代碼如下:
<body>
<div class="a"> a<div>
<div class="parentBox">
<div class="innerBox">innerBox</div>
</div>
</body>
js:
. 代碼如下:
$(function(){
var_offsetTop = $(".innerBox").offset().top; //280px
})