自己想好好了解offset属性，自己写了demo，供大家学习
?
<body>
<div style="position: absolute;top:50%;left: 50%;width: 200px;height: 200px;border: 1px solid red;" id="parentId">
<div style="width: 100px;height: 100px;border: 1px solid blue; margin-top:10px;padding-top: 20px;padding-left: 30px;margin-left: 40px;" id="sonId">
dasfdsaf
</div>
</div>
</body>
<script>
$(function(){
$("#parentId").on("click",function(event){
// alert(event.type);
//offsetLeft获取最近的父容器的距当前控件左边(不包含margin)的距离，
console.info("parent : " + this.offsetLeft);//根据实际情况来显示
//offsetTop获取最近的父容器的距当前控件上边（不包含margin）的距离，
console.info("parent offsetTop: " + this.offsetTop);//根据实际情况来显示
//offsetHeight获取当前控件的高度 = 控件高度 + border高度 + padding（上下）
console.info("parent offsetHeight: " + this.offsetHeight);//202 = height: 200px;上下边线2px
//offsetWidth获取当前控件的高度 = 控件宽度 + border宽度+ padding（左右）
console.info("parent offsetWidth: " + this.offsetWidth);//202 = width: 200px;左右边线2px
//返回当前对象的父控件
console.info("parent offsetParent: " + this.offsetParent);//body控件
});
$("#sonId").on("click",function(event){
// alert(event.type);
console.info("son offsetLeft: " + this.offsetLeft);//margin-left: 40px
console.info("son offsetHeight: " + this.offsetHeight);//122 = height: 100px;padding-top: 20px;上下边线2px
console.info("son offsetTop: " + this.offsetTop);//margin-top:10px;
console.info("son offsetWidth: " + this.offsetWidth);//132px = width: 100px;padding-left: 30px;左右边线2px
console.info("son offsetParent: " + this.offsetParent);//得到的是div#parentId控件
});
});
</script>
?
?
?
offsetLeft offsetHeight offsetTop offsetWidth offsetParent学习笔记
原文：http://hbiao68.iteye.com/blog/2229995