jQuery的offset().top与JS的offsetTop的区别

这是我在做播放器的水平方向和竖直方向的拖拽进度条遇到的问题。一开始我老想着这两个方法的效果应该是一样的，结果就被它搞了很久很久。后来我发现这两者的区别其实就是对象的作用域不同（不知道这么说行不行）

这里我就拿offsetTop举例子

jQuery的offset().top

它获取的值==你获取的元素的上边框距离html的顶部的值

JS的offsetTop

它获取的值==你获取的元素的上边框距离与它最近的父级元素（必须要脱离文档流的，relative没有用）的的顶部的值

我的例子在下面：

我是垂直方向上的拖拽

我这里的每个div都有absolute，所以我后面通过DOM获取的值就不正常

JS方法获取：
console.log一下后，或得到的结果就是 （对应CSS里设置的定位的值）

//总进度条元素的offsetTop，黑色背景的offsetTop
console.log(totalVolume.offsetTop,volumeWrap.offsetTop)；

jQuery方法获取：

console.log("$(\".sound-progress\").offset().top==",$(".sound-progress").offset().top);