jquery获取div距离窗口和父级dv的距离示例
jquery中jquery.offset().top / left用于获取p距离窗口的距离，jquery.position().top / left 用于获取距离父级p的距离（必须是绝对定位的p）。
（1）先介绍jquery.offset().top / left
css：
. 代码如下:
*{ margin: 0px; padding: 0px; }
p{ 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>
<p class="a"> a<p>
<p class="parentbox">
<p class="innerbox">innerbox</p>
</p>
</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;
//因为绝对定义是以父级p的左上角的内边框为参考坐标的。
//如果innerbox设置了边框的话还要加上边框的值
（2）jqury.position().top /left用于获取子p距离父级p的距离，并且子p必须是绝对定位
css：
. 代码如下:
*{ margin: 0px; padding: 0px; }
p{ 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>
<p class="a"> a<p>
<p class="parentbox">
<p class="innerbox">innerbox</p>
</p>
</body>
js:
. 代码如下:
$(function(){
var_offsettop = $(".innerbox").offset().top; //280px
})