Obtener la posición de una etiqueta div / span

¿Alguien puede mostrarme cómo obtener la posición top& leftde un elemento divo spancuando uno no está especificado?

es decir:

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

En lo anterior, si lo hago:

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

Se 55pxdevuelve el valor de . Sin embargo, si intento eso para span'12a', no se devuelve nada.

Tengo un montón de div/ spans en una página para las que no puedo especificar top/ leftproperties, pero necesito mostrar un divdirectamente debajo de ese elemento.

Esta función le dirá la posición x, y del elemento en relación con la página. Básicamente, debe recorrer todos los padres del elemento y sumar sus compensaciones.

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

Sin embargo, si solo desea la posición x, y del elemento en relación con su contenedor, entonces todo lo que necesita es:

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

Para colocar un elemento directamente debajo de éste, también necesitará conocer su altura. Esto se almacena en la propiedad offsetHeight / offsetWidth.

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

Puede llamar al método getBoundingClientRect()en una referencia al elemento. A continuación, puede examinar las top, left, righty / o bottompropiedades ...

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

Si usa jQuery, puede usar el código más sucinto ...

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

Mientras que la respuesta de @ nickf funciona. Si no le interesan los navegadores más antiguos, puede utilizar esta versión pura de Javascript. Funciona en IE9 + y otros

var rect = el.getBoundingClientRect();

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

Como señaló Alex, puede usar jQuery offset () para obtener la posición relativa al flujo del documento. Utilice position () para sus coordenadas x, y relativas al padre.

EDITAR: Cambiado document.readypor window.loadporque loadespera todos los elementos para que obtenga su tamaño en lugar de simplemente preparar el DOM. En mi experiencia, loadresulta en menos elementos posicionados incorrectamente en Javascript.

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

Para cualquiera que necesite solo la posición superior o izquierda, ligeras modificaciones en el código legible de @ Nickf es suficiente.

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

y

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

Me doy cuenta de que este es un hilo antiguo, pero la respuesta de @alex debe marcarse como la respuesta correcta

element.getBoundingClientRect() es una coincidencia exacta con jQuery $(element).offset()

Y es compatible con IE4 + ... https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundingClientRect