<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
body, div {
padding: 0px;
margin: 0px;
}
#div1 {
width: 100px;
height: 100px;
background: #000000;
padding: 50px;
border: 20px solid red;
margin: 30px;
float: right;
}
#p1 {
width: 300px;
height: 100px;
background: #ababab;
padding: 50px;
border: 20px solid red;
margin: 30px;
float: right;
clear: both;
}
#inner {
width: 100px;
height: 100px;
background: yellow;
float: right;
}
#p2 {
width: 300px;
height: 100px;
background: #ababab;
padding: 50px;
border: 20px solid red;
/*margin: 30px;*/
position: absolute;
left: 100px;
top: 100px;
clear: both;
}
#inner2 {
width: 100px;
height: 100px;
background: gray;
float: right;
}
</style>
</head>
<body>
<div id="div1">
</div>
<div id="p1">
<div id="inner"></div>
</div>
<div id="p2">
<div id="inner2"></div>
</div>
<script src="../Script/jquery-2.1.1.js"></script>
<script type="text/javascript">
//算出偏移量,首先选参照物
//产生偏移量 margin,float,position长长的标准留逻辑
//parentNode和offsetParent不一定是一码事,；不过，标准流，他们的offsetParent都是body，除非他的父元素做了定位（相对或者绝对 ==relative 和absoulte）
var oDiv = document.getElementById('div1');
var ch = oDiv.offsetLeft;//距离盒子的边框外侧；浮动也会产生偏移量
console.log(ch);
var parent = oDiv.offsetParent;
console.log(parent);
console.log(parent.offsetLeft);
var oInner = document.getElementById('inner');
console.log(oInner.offsetLeft);
console.log(oInner.offsetParent);//
console.log(oInner.parentNode);
var oInner2 = document.getElementById('inner2');
console.log(oInner2.offsetLeft);
console.log(oInner2.offsetParent);
</script>
</body>
</html>
//计算ele这个元素距离浏览最左和上边的偏移量
function offset(ele) {
var l = ele.offsetLeft;
var t = ele.offsetTop;
//l += ele.offsetParent.offsetLeft;
//t += ele.offsetParent.offsetTop;
var p = ele.offsetParent;
while (p) {
l += p.offsetLeft;
t += p.offsetTop;
p = p.offsetParent;
}
return { top:t,left:l }
}
