<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
width: 300px;
height: 300px;
background-color: pink;
position: relative;
margin: 10px;
border: 1px solid #000;
overflow: auto;
}
.box2 {
width: 100px;
height: 400px;
background-color: yellow;
position: absolute;
top: 50px;
left: 50px;
}
</style>
<script src="jquery-3.4.1.js"></script>
<script>
$(function () {
// left/top 距离页面最顶端或者最左端的距离，和有没有父盒子没有关系。
$('button').eq(0).click(function () {
console.log($('.box2').offset().top);
})
// 只能获取 不能设置，设置无效。
$('button').eq(1).click(function () {
$('.box2').offset().top = 100;
})
// left/top 距离所定位的父盒子左边或顶部距离，获取的值跟 padding margin border 无关系
$('button').eq(2).click(function () {
console.log($('.box2').position().top);
})
// left/top 无参数的时候表示获取偏移，有参数的时候表示设置偏移。注意：想要设置或者获取需要指定标签有滚动区域，否则无效。
$('button').eq(3).click(function () {
console.log($('.box1').scrollTop());
$('.box1').scrollTop(100);
})
})
</script>
</head>
<body>
<button>offset().top获取</button>
<button>offset().top设置</button>
<button>position().top获取</button>
<button>scrollTop()</button>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
