Możesz uzyskać top i left bez przechodzenia przez DOM tak:

function getCoords(elem) { // crossbrowser version
    var box = elem.getBoundingClientRect();

    var body = document.body;
    var docEl = document.documentElement;

    var scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop;
    var scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft;

    var clientTop = docEl.clientTop || body.clientTop || 0;
    var clientLeft = docEl.clientLeft || body.clientLeft || 0;

    var top  = box.top +  scrollTop - clientTop;
    var left = box.left + scrollLeft - clientLeft;

    return { top: Math.round(top), left: Math.round(left) };
}

Możesz użyć element.getBoundingClientRect() Aby pobrać pozycję elementu względem punktu widokowego.

Następnie użyj document.documentElement.scrollTop aby obliczyć przesunięcie viewport.

Suma tych dwóch elementów da pozycję elementu względem dokumentu:

element.getBoundingClientRect().top + document.documentElement.scrollTop

Proponuję użyć

element.getBoundingClientRect()

Zgodnie z propozycją tutaj zamiast ręcznego obliczania offsetu za pomocą offsetLeft, offsetTop i offsetParent . zgodnie z propozycją tutaj W pewnych okolicznościach* ręczne Przejście daje nieprawidłowe wyniki. Zobacz ten Plunker: http://plnkr.co/pC8Kgj

*gdy element znajduje się wewnątrz przewijalnego rodzica ze statycznym (=domyślnym) pozycjonowaniem.

document-offset (3rd-party script ) jest interesujący i wydaje się wykorzystywać podejścia z innych odpowiedzi tutaj.

Przykład:

var offset = require('document-offset')
var target = document.getElementById('target')
console.log(offset(target))
// => {top: 69, left: 108} 

Znalazłem następującą metodę, która jest najbardziej niezawodna w przypadku przypadków skrajnych, które potkną się w offsetTop/offsetLeft.

function getPosition(element) {
    var clientRect = element.getBoundingClientRect();
    return {left: clientRect.left + document.body.scrollLeft,
            top: clientRect.top + document.body.scrollTop};
}

Dla tych, którzy chcą uzyskać współrzędne X i y różnych pozycji elementu względem dokumentu.

const getCoords = (element, position) => {
  const { top, left, width, height } = element.getBoundingClientRect();
  let point;
  switch (position) {
    case "top left":
      point = {
        x: left + window.pageXOffset,
        y: top + window.pageYOffset
      };
      break;
    case "top center":
      point = {
        x: left + width / 2 + window.pageXOffset,
        y: top + window.pageYOffset
      };
      break;
    case "top right":
      point = {
        x: left + width + window.pageXOffset,
        y: top + window.pageYOffset
      };
      break;
    case "center left":
      point = {
        x: left + window.pageXOffset,
        y: top + height / 2 + window.pageYOffset
      };
      break;
    case "center":
      point = {
        x: left + width / 2 + window.pageXOffset,
        y: top + height / 2 + window.pageYOffset
      };
      break;
    case "center right":
      point = {
        x: left + width + window.pageXOffset,
        y: top + height / 2 + window.pageYOffset
      };
      break;
    case "bottom left":
      point = {
        x: left + window.pageXOffset,
        y: top + height + window.pageYOffset
      };
      break;
    case "bottom center":
      point = {
        x: left + width / 2 + window.pageXOffset,
        y: top + height + window.pageYOffset
      };
      break;
    case "bottom right":
      point = {
        x: left + width + window.pageXOffset,
        y: top + height + window.pageYOffset
      };
      break;
  }
  return point;
};

Użycie

• getCoords(document.querySelector('selector'), 'center')

• getCoords(document.querySelector('selector'), 'bottom right')

• getCoords(document.querySelector('selector'), 'top center')

Jeśli nie masz nic przeciwko użyciu jQuery, możesz użyć funkcji offset(). Zapoznaj się z dokumentacją Jeśli chcesz dowiedzieć się więcej o tej funkcji.

Http://www.quirksmode.org/js/findpos.html wyjaśnia najlepszy sposób, aby to zrobić, w sumie, jesteś na dobrej drodze, musisz znaleźć przesunięcia i trawersować drzewo rodziców.