html离父元素的距离,jquery获取div距离窗口和父级dv的距离示例

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:

a
innerBox

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:

a
innerBox

js:

$(function(){

var_offsetTop = $(".innerBox").offset().top; //280px

})

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值