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

demo的代码如下：

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

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

content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.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 //有定位元素的父级距离