Получить позицию тега div / span

Эта функция сообщит вам позицию x, y элемента относительно страницы. По сути, вам нужно перебрать все родительские элементы и сложить их смещения.

function getPos(el) {
    // yay readability
    for (var lx=0, ly=0;
         el != null;
         lx += el.offsetLeft, ly += el.offsetTop, el = el.offsetParent);
    return {x: lx,y: ly};
}

Однако, если вам просто нужна позиция элемента по осям x, y относительно его контейнера, то все, что вам нужно, это:

var x = el.offsetLeft, y = el.offsetTop;

Чтобы разместить элемент прямо под этим, вам также необходимо знать его высоту. Это хранится в свойстве offsetHeight / offsetWidth.

var yPositionOfNewElement = el.offsetTop + el.offsetHeight + someMargin;

Вы можете вызвать метод getBoundingClientRect() по ссылке на элемент. Затем вы можете изучить свойства top, left, right и / или bottom ...

var offsets = document.getElementById('11a').getBoundingClientRect();
var top = offsets.top;
var left = offsets.left;

Если вы используете jQuery, вы можете использовать более сжатый код ...

var offsets = $('#11a').offset();
var top = offsets.top;
var left = offsets.left;

Как заметил Алекс, вы можете использовать jQuery offset () для получения позиции относительно потока документов. Используйте position () для его координат x, y относительно родителя.

Обновлено: переключено document.ready на window.load, потому что load ожидает всех элементов, поэтому вы получаете их размер, а не просто готовите DOM. По моему опыту, load приводит к меньшему количеству элементов, неправильно позиционированных в Javascript.

$(window).load(function(){ 
  // Log the position with jQuery
  var position = $('#myDivInQuestion').position();
  console.info('X: ' + position.left + ", Y: " + position.top );
});

Для тех, кому нужно только верхнее или левое положение, небольшие изменения в читаемом коде @ Nickf помогут.

function getTopPos(el) {
    for (var topPos = 0;
        el != null;
        topPos += el.offsetTop, el = el.offsetParent);
    return topPos;
}

и

function getLeftPos(el) {
    for (var leftPos = 0;
        el != null;
        leftPos += el.offsetLeft, el = el.offsetParent);
    return leftPos;
}

Я понимаю, что это старая ветка, но ответ @alex необходимо пометить как правильный.

element.getBoundingClientRect() - точное соответствие $(element).offset() jQuery.

И он совместим с IE4 + ... https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundingClientRect

Хотя ответ @nickf работает. Если вам не нравятся старые браузеры, вы можете использовать эту чистую версию Javascript. Работает в IE9 + и др.

var rect = el.getBoundingClientRect();

var position = {
  top: rect.top + window.pageYOffset,
  left: rect.left + window.pageXOffset
};