This should probably not be as complicated as it is, but obviously: JavaScript.

Anyway, there are 2 basic approaches.

You may see offsetTop and offsetLeft used in examples in blogs and on stack. This is great in a garden path setup, but only gives the distance between the element and it’s nearest “offsetParent” (which is the element that controls it’s position). that’s to say if you have an element with position: absolute and top: 100 and it has a child that flows naturally to 100px within it, the offsetTop of that element will be 100, not 200 as you might expect.

There are really 2 ways to get the position of an element from the top/left of the body/document.

1. window.pageXOffset + element.getBoundingClientRect().left (switch for pageYOffset and .top for vertical)
2. iterate through offset parents:

function getTop(element) {
  var y = 0;
  while (element != null && element != document.body) {
    y += element.offsetTop;
    element = element.offsetParent;
  return y;
// substitute offsetLeft for horizontal