How to calculate the distance between the top-left corner of an HTML element and the window top-left corner?

Question

Is there an easily way to do that? Consider having properties like: border, padding. Would that method work even with box-sizing: content-box/border-box?

Answer 1

perhaps I do not understand your question, but

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.offsetLeft (Or same link except offsetLeft, I can't post more then 2 links yet :P)

https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundingClientRect

Let me know if those links don't solve it!

Answer 2

DEMO

Perhaps you may be looking similar to position or offest in jquery can be simply achieved by using jQuery as follows

HTML

<div class="box">Lorem ipsum dores.</div>

jQuery

var $box = $('.box');
alert( $box.offset().top)

Hope this helps!

Answer 3

The function

element.getBoundingClientRect()

solves the problem.

More about it can be found here:

https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundingClientRect