<article class="foo">
	<div class=box></div>
</article>
<pre id="result"></pre>
body {
  margin: 0;
  padding: 0;
}
#result {
  padding: 16px;
}
.foo {
  position: absolute;
  left: 100px;
  top: 100px;
  border: 5px solid hsl(200 100% 50% / 25%);
  background: hsl(240 50% 50% / 25%);
  width: 100px;
  height: 100px;
  box-sizing: border-box;
  .box {
    position: absolute;
    left: 100px;
    top: 100px;
    width: 100px;
    height: 100px;
    background-color: hsl(0 90% 50% / 25%);
    box-sizing: border-box;
  }
}
View Compiled 
const $result = document.getElementById('result')
const $foo = document.querySelector('.foo')
const $box = document.querySelector('.box')
let result = []

const boxPos = $box.getBoundingClientRect()
const boxPosY = $box.offsetTop

console.log(boxPos, boxPosY)

result = [
  JSON.stringify(boxPos, null, 2),
  `offset / x:${$box.offsetTop}, y:${$box.offsetTop}`
]

$result.innerText = result.join('\n')

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.