Получить координаты (X,Y) HTML-элемента

Эта функция возвращает позицию элемента относительно всей страницы (документа):

function getOffset(el) {
  const rect = el.getBoundingClientRect();
  return {
    left: rect.left + window.scrollX,
    top: rect.top + window.scrollY
  };
}

С помощью этой функции мы можем получить позицию по оси X:

getOffset(element).left

... или позицию по оси Y:

getOffset(element).top

Библиотеки прилагают значительные усилия, чтобы получить точные смещения для элемента.

Вот простая функция, которая справляется с этой задачей в любых обстоятельствах, с которыми я сталкивался:

function getOffset(el) {
    var _x = 0;
    var _y = 0;
    while (el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) {
        _x += el.offsetLeft - el.scrollLeft;
        _y += el.offsetTop - el.scrollTop;
        el = el.offsetParent;
    }
    return { top: _y, left: _x };
}
var x = getOffset(document.getElementById('yourElId')).left; 

Эта функция вычисляет общее смещение элемента относительно родительских элементов, учитывая их прокрутку. Вы можете использовать её, передав элемент, для которого хотите узнать смещения.

HTML-элементы в большинстве браузеров имеют следующие свойства:

offsetLeft
offsetTop

Эти свойства указывают позицию элемента относительно ближайшего родительского элемента, имеющего контекстный поток. Этот родительский элемент часто можно получить через свойство offsetParent.

В Internet Explorer и Firefox 3 доступны свойства:

clientLeft
clientTop

Эти свойства встречаются реже и указывают позицию элемента относительно клиентской области его родительского элемента (паддинг является частью клиентской области, а граница и маргин не включаются).

Если на странице имеется хотя бы один элемент "DIV", то функция, представленная вами (meouw), возвращает значение "Y" за пределами текущей страницы. Для того чтобы определить точную позицию, необходимо учитывать как offsetParent, так и parentNode.

Вот код, который можно использовать для этой задачи (он проверен на FF2):

var getAbsPosition = function(el){
    var el2 = el;
    var curtop = 0;
    var curleft = 0;
    if (document.getElementById || document.all) {
        do  {
            curleft += el.offsetLeft - el.scrollLeft;
            curtop += el.offsetTop - el.scrollTop;
            el = el.offsetParent;
            el2 = el2.parentNode;
            while (el2 != el) {
                curleft -= el2.scrollLeft;
                curtop -= el2.scrollTop;
                el2 = el2.parentNode;
            }
        } while (el.offsetParent);
    } else if (document.layers) {
        curtop += el.y;
        curleft += el.x;
    }
    return [curtop, curleft];
};

Эта функция вычисляет абсолютное положение элемента, принимая во внимание все родительские элементы и их прокрутку. Если у вас есть дополнительные вопросы или требуется помощь с конкретным сценарием, не стесняйтесь спрашивать!

Вы можете добавить два свойства к Element.prototype, чтобы получить координаты верхней и левой части любого элемента.

Object.defineProperty(Element.prototype, 'documentOffsetTop', {
    get: function () { 
        return this.offsetTop + (this.offsetParent ? this.offsetParent.documentOffsetTop : 0);
    }
});

Object.defineProperty(Element.prototype, 'documentOffsetLeft', {
    get: function () { 
        return this.offsetLeft + (this.offsetParent ? this.offsetParent.documentOffsetLeft : 0);
    }
});

Эти свойства можно использовать следующим образом:

var x = document.getElementById('myDiv').documentOffsetLeft;

Вот демонстрация, сравнивающая результаты с помощью jQuery метода offset().top и .left: http://jsfiddle.net/ThinkingStiff/3G7EZ/