vue获取元素距离页面顶部的距离_原生js获取距离页面顶端的距离

不用jquery的情况下，因为用的是vue框架，获取元素到页面顶端的距离

demo的代码如下：

问题1 offsetTop只能获取到有定位元素父级的距离，怎么获取到页面顶端距离呢

问题2 子级有了transform 24px但offsetTop却获取不到 下面打印出来的值是0

Document

dddddddddddddd

p{line-height:29px; font-size:29px}

.box{width:100px; height:100px; margin-top: 120px; margin-left:180px; border:2px solid green; position: relative;}

.child{width:50px; height:50px; transform: translateY(24px); border:1px solid red; }

var Child=document.getElementsByClassName('child')[0]

var Box=document.getElementsByClassName('box')[0]

console.log(Child.offsetTop) // 得到0

console.log(Box.offsetTop); //178

// console.log(Box.offsetLeft)

// offsetTop //有定位元素的父级距离