<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
font-family: "Microsoft YaHei", serif;
}
body, dl, dd, p, h1, h2, h3, h4, h5, h6 {
margin: 0;
}
ol, ul, li {
margin: 0;
padding: 0;
list-style: none;
}
img {
border: none
}
#wrap{
position: relative;
width: 500px;
height: 500px;
margin: 50px;
background-color: #cc3366;
}
#wrap p{
position: absolute;
top: 50px;
left: 50px;
width: 50px;
height: 50px;
background-color: #f4e5a9;
}
</style>
</head>
<body>
<div id="wrap">
<p id="p"></p>
</div>
<script>
let oWrap = document.getElementById("wrap");
let oP = document.getElementById("p");
console.log(oP.offsetParent); // 定位父级
console.log(oP.offsetLeft); //元素左边到定位父级的左边的距离
// 就是里边的整个方块包含border/content 到外边那个父级content 的距离
// 就是margin+left的值
console.log(oP.getBoundingClientRect());
// 每条边到浏览器上边和左边距离
</script>
</body>
</html>
Python3Turtle