Obtenha a posição de uma tag div / span

Alguém pode me mostrar como obter a top& leftposição de um elemento divou spanquando um não está especificado?

ie:

<span id='11a' style='top:55px;' onmouseover="GetPos(this);">stuff</span>
<span id='12a' onmouseover="GetPos(this);">stuff</span>

Acima, se eu fizer:

document.getElementById('11a').style.top

O valor de 55pxé retornado. No entanto, se eu tentar fazer isso para span'12a', nada será retornado.

Eu tenho um monte de div/ spans em uma página para a qual não posso especificar as propriedades top/ left, mas preciso exibir um divdiretamente sob esse elemento.

Esta função informará a posição x, y do elemento em relação à página. Basicamente, você deve percorrer todos os pais do elemento e adicionar seus deslocamentos.

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};
}

No entanto, se você quiser apenas a posição x, y do elemento em relação ao seu contêiner, tudo o que você precisa é:

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

Para colocar um elemento diretamente abaixo deste, você também precisará saber sua altura. Isso é armazenado na propriedade offsetHeight / offsetWidth.

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

Você pode chamar o método getBoundingClientRect()em uma referência ao elemento. Em seguida, você pode examinar os top, left, righte / ou bottompropriedades ...

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

Se estiver usando jQuery, você pode usar o código mais sucinto ...

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

Enquanto a resposta de @nickf funcionar. Se você não liga para navegadores mais antigos, pode usar esta versão Javascript puro. Funciona no IE9 + e outros

var rect = el.getBoundingClientRect();

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

Como Alex observou, você pode usar jQuery offset () para obter a posição relativa ao fluxo do documento. Use position () para suas coordenadas x, y relativas ao pai.

EDIT: Alternado document.readypara window.loadporque loadespera por todos os elementos para que você obtenha seus tamanhos em vez de simplesmente preparar o DOM. Na minha experiência, loadresulta em menos elementos posicionados em Javascript incorretamente.

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

Para qualquer um que precise apenas da posição superior ou esquerda, pequenas modificações no código legível de @Nickf resolvem o problema.

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

e

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

Sei que este é um tópico antigo, mas a resposta de @alex precisa ser marcada como a resposta correta

element.getBoundingClientRect() é uma correspondência exata para jQuery $(element).offset()

E é compatível com IE4 + ... https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundingClientRect