<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>offset应用</title>
<style>
* {
margin: 0;
padding: 0;
}
.parent {
width: 300px;
height: 300px;
background-color: #ccc;
margin: 20px;
padding: 20px;
border: 20px solid red;
position: relative;
}
.child {
width: 100px;
height: 100px;
background-color: orange;
margin: 20px;
position: absolute;
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<!-- <button>获取</button> -->
<div class="parent">
<!-- 父元素 -->
<div class="child">
<!-- 子元素 -->
</div>
</div>
<button>获取</button>
<script>
var btn = document.querySelector('button');
var child = document.querySelector('.child');
btn.onclick = function() {
console.log(child.offsetTop); // 70 70
console.log(child.offsetLeft);
// 在不脱标的情况下 offsetTop / offsetLeft 是当前盒子距离最近的定位元素的距离
// 父元素的padding + 自己的margin
// 在脱标的情况下 offsetTop / offsetLeft 和父元素就没啥关系了, 只考虑自己本身的 top/left 和 margin
}
</script>
</body>
</html>
11-29
1078
1078
02-26
493
493
08-30
495
495
08-29
782
782
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
