Encontrar la posición de un objeto DOM/HTML.

13-04-2005 > Maik

Mostrar o escribir comentarios (dudas) sobre este artículo

Programación en Javascript.
Testeado con IE6, IE7, Firefox 1.5, Firefox 2, Opera

En esta página se muestra como localizar la posición absoluta de un objeto que esta en la pagina Web. Esta función es muy útil, por ejemplo, para hacer aparecer un div flotante en algún sitio de la página para que cubra algún objeto, muestre una imagen, aparezca un calendario,...

La función Javascript es la siguiente:
function findPos(obj) {
    var curleft = curtop = 0;
    if (obj.offsetParent) {
        curleft = obj.offsetLeft
        curtop = obj.offsetTop
        while (obj = obj.offsetParent) {
            curleft += obj.offsetLeft
            curtop += obj.offsetTop
        }
    }
    return [curleft,curtop];
}

Para llamar a esta función le tenemos que pasar por parámetro un objeto DOM, la función retornará las coordenadas [x,y] de ese objeto en posición absoluta.
var coors = findPos(document.getElementById('imagen_calendario'));

Y para ver su funcionalidad, podemos crear un div flotante en esa posición:
var div_fl = document.createElement('DIV');
div_fl.style.position = 'absolute';
div_fl.id = 'calendario';
div_fl.className = 'div_fl';
div_fl.innerHTML = 'Prueba Calendario';
div_fl.style.left = coors[0] +'px';
div_fl.style.top = coors[1] +'px';
document.body.appendChild(div_fl);

Saludos!