Getting Absolute Position Of An Element Relative To Browser

I have a div set to the css class float with float being: .float { display:block; position:fixed; top: 20px; left: 0px; z-index: 1999999999; } * html .float {position:absolute;}

Solution 1:

I've had a similar question before, and looking through the blogs, the websites and this solution from stackoverflow, I've realized that a one size fits all solution is nowhere to be found! So, without further ado, here is what I've put together that gets the x,y of any element through any parent node, including iframes, scrolling divs and whatever! Here ya go:

functionfindPos(obj) {
    var curleft = 0;
    var curtop = 0;
    if(obj.offsetLeft) curleft += parseInt(obj.offsetLeft);
    if(obj.offsetTop) curtop += parseInt(obj.offsetTop);
    if(obj.scrollTop && obj.scrollTop > 0) curtop -= parseInt(obj.scrollTop);
    if(obj.offsetParent) {
        var pos = findPos(obj.offsetParent);
        curleft += pos[0];
        curtop += pos[1];
    } elseif(obj.ownerDocument) {
        var thewindow = obj.ownerDocument.defaultView;
        if(!thewindow && obj.ownerDocument.parentWindow)
            thewindow = obj.ownerDocument.parentWindow;
        if(thewindow) {
            if(thewindow.frameElement) {
                var pos = findPos(thewindow.frameElement);
                curleft += pos[0];
                curtop += pos[1];
            }
        }
    }

    return [curleft,curtop];
}

Solution 2:

A variation on user1988451's answer that I have tested cross-browser. I found their answer did not address scroll width (so I added the check for obj.scrollLeft), and behaved differently in FF and Chrome until I added the checks for thewindow.scrollY and thewindow.scrollX. Tested in Chrome, IE, Safari, Opera, FF, IE 9-10, and IE9 with 8 and 7 modes. Please note that I have not tested its behavior with iframes:

functionfindPos(obj, foundScrollLeft, foundScrollTop) {
    var curleft = 0;
    var curtop = 0;
    if(obj.offsetLeft) curleft += parseInt(obj.offsetLeft);
    if(obj.offsetTop) curtop += parseInt(obj.offsetTop);
    if(obj.scrollTop && obj.scrollTop > 0) {
        curtop -= parseInt(obj.scrollTop);
        foundScrollTop = true;
    }
    if(obj.scrollLeft && obj.scrollLeft > 0) {
        curleft -= parseInt(obj.scrollLeft);
        foundScrollLeft = true;
    }
    if(obj.offsetParent) {
        var pos = findPos(obj.offsetParent, foundScrollLeft, foundScrollTop);
        curleft += pos[0];
        curtop += pos[1];
    } elseif(obj.ownerDocument) {
        var thewindow = obj.ownerDocument.defaultView;
        if(!thewindow && obj.ownerDocument.parentWindow)
            thewindow = obj.ownerDocument.parentWindow;
        if(thewindow) {
            if (!foundScrollTop && thewindow.scrollY && thewindow.scrollY > 0) curtop -= parseInt(thewindow.scrollY);
            if (!foundScrollLeft && thewindow.scrollX && thewindow.scrollX > 0) curleft -= parseInt(thewindow.scrollX);
            if(thewindow.frameElement) {
                var pos = findPos(thewindow.frameElement);
                curleft += pos[0];
                curtop += pos[1];
            }
        }
    }

    return [curleft,curtop];
}

Solution 3:

If you can use items style element;

<div id="container" style="top: 20px;left: 0px;z-index: 1999999999;">

You can get it with element style attribute;

var top = parseInt(document.getElementById('container').style.top.split('px')[0], 10); // This row returns 20

You can use top, left, width, height etc...

Solution 4:

You may find clues here : http://code.google.com/p/doctype/wiki/ArticlePageOffset But I think you'll need to add the parents' offsets to have the right value.

Solution 5:

I use this for PhantomJS rasterization:

functiongetClipRect(obj) {
  if (typeof obj === 'string')
    obj = document.querySelector(obj);

  var curleft = 0;
  var curtop = 0;

  var findPos = function(obj) {
    curleft += obj.offsetLeft;
    curtop += obj.offsetTop;
    if(obj.offsetParent) {
      findPos(obj.offsetParent);
    }
  }
  findPos(obj);

  return {
    top: curtop,
    left: curleft,
    width: obj.offsetWidth,
    height: obj.offsetHeight
  };
}