Element.offsetTop Element.offsetLeftoffsetTopbody
<!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> result output: offset ratio of the subbox: 113padding+border+body 113
just in time the browser of div.parent "s padding+border+body defaults to padding 8px, that is, 100mm 5mm 8pm 113.0.
console.log(child.offsetParent == parent.offsetParent);output result: true.
the offset of div.child the parent child.offsetParent should be div.parent, right?
