极客观点
项目管理
HarmonyOS
书上说Element.offsetTop 和Element.offsetLeft的偏移量是相对与父级元素的内边框取值，offsetTop是子元素的外边框到父级元素内边框的距离。但在测试时发现直接就相对于body取值了，迷惑中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.parent {
padding: 100px;
border: 5px solid green;
width: 500px;
height: 500px;
}
.child {
border: 2px dashed red;
width: 200px;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
<script type="text/javascript">
var parent = document.querySelector("div.parent");
var child = document.querySelector("div.child");
document.writeln("子框的偏移量比："+child.offsetLeft+":"+child.offsetTop);
</script>
</body>
</html>结果输出：子框的偏移量比：113:113
刚好时div.parent的padding+border+body的浏览器默认padding 8px,即100+5+8=113.
console.log(child.offsetParent == parent.offsetParent);输出结果：true.
div.child的偏移量父级child.offsetParent 应该是div.parent吧？
这个相对是相对于上层中最接近的一个定位元素.
定位元素是指 position 值非 static 的元素.
你通过 css 给 div.parent 设置 position: relative. div.child 的 offsetParent 此时就是 div.parent 了.