Retrieve the position (X,Y) of an HTML element

Asked 2023-09-20 20:35:05 View 272,069

I want to know how to get the X and Y position of HTML elements such as img and div in JavaScript.

  • i had been using these 7 lines of code which works in all browsers with discrepancies in ie5,6,7(i did not remember having any proboem... may be the doc type) ... quirksmode.org/js/findpos.html and i had been using it a lot for so many years. may be sombody can point the flaws if any. - anyone
  • @AnthonyWJones, I suppose you needed the pedantic pleasure, but it is obvious, as it always is when unspecified, that the OP refers to the most general case, or refers to the window coordinates of the browser. - anyone
  • @Mote, No, it's not that obvious. Leave inference, subjectivity and false axioms aside. It can be relative to viewport or top of the page (aka document.documentElement). - anyone
  • Defaulting to the most general is not inference, it is the logical progression, so that would be relative to the window, or "top of page" might be the term as you put it. In Game Theory, it is codified as a concept called a Schelling point. Be sure to specify when you don't mean the most general case. - anyone
  • The point is, the obvious for some is not obvious for others. Even if in theory we know which is the case, due to empirical knowledge, clarity hurts no one here, specially for those who just started programming. - anyone

Answers

The correct approach is to use element.getBoundingClientRect():

var rect = element.getBoundingClientRect();
console.log(rect.top, rect.right, rect.bottom, rect.left);

Internet Explorer has supported this since as long as you are likely to care about and it was finally standardized in CSSOM Views. All other browsers adopted it a long time ago.

Some browsers also return height and width properties, though this is non-standard. If you're worried about older browser compatibility, check this answer's revisions for an optimised degrading implementation.

The values returned by element.getBoundingClientRect() are relative to the viewport. If you need it relative to another element, simply subtract one rectangle from the other:

var bodyRect = document.body.getBoundingClientRect(),
    elemRect = element.getBoundingClientRect(),
    offset   = elemRect.top - bodyRect.top;

alert('Element is ' + offset + ' vertical pixels from <body>');

Answered   2023-09-20 20:35:05

This function returns an element's position relative to the whole document (page):

function getOffset(el) {
  const rect = el.getBoundingClientRect();
  return {
    left: rect.left + window.scrollX,
    top: rect.top + window.scrollY
  };
}

Using this we can get the X position:

getOffset(element).left

... or the Y position:

getOffset(element).top

Answered   2023-09-20 20:35:05

  • What about if the element lives within many nested scrollable elements? I think you'd need to recursively factor in the scrollLeft / scrollTop of every parent element? - anyone

The libraries go to some lengths to get accurate offsets for an element.
here's a simple function that does the job in every circumstances that I've tried.

function getOffset( el ) {
    var _x = 0;
    var _y = 0;
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
        _x += el.offsetLeft - el.scrollLeft;
        _y += el.offsetTop - el.scrollTop;
        el = el.offsetParent;
    }
    return { top: _y, left: _x };
}
var x = getOffset( document.getElementById('yourElId') ).left; 

Answered   2023-09-20 20:35:05

  • change: el = el.parentNode to: el = el.offsetParent; and it seems to work for nested iframes now... I'm thinking that's what you intended? - anyone
  • Tested this out, it works amazing even with a zoom level present! - anyone

If you want it done only in javascript, here are some one liners using getBoundingClientRect()

window.scrollY + document.querySelector('#elementId').getBoundingClientRect().top // Y

window.scrollX + document.querySelector('#elementId').getBoundingClientRect().left // X

The first line will return offsetTop say Y relative to document. The second line will return offsetLeft say X relative to document.

getBoundingClientRect() is a javascript function that returns the position of the element relative to viewport of window.

Answered   2023-09-20 20:35:05

HTML elements on most browsers will have:-

offsetLeft
offsetTop

These specifiy the position of the element relative its nearest parent that has layout. This parent can often be accessed bif the offsetParent property.

IE and FF3 have

clientLeft
clientTop

These properties are less common, they specify an elements position with its parents client area (padded area is part of the client area but border and margin is not).

Answered   2023-09-20 20:35:05

If page includes - at least- any "DIV", the function given by meouw throws the "Y" value beyond current page limits. In order to find the exact position, you need to handle both offsetParent's and parentNode's.

Try the code given below (it is checked for FF2):


var getAbsPosition = function(el){
    var el2 = el;
    var curtop = 0;
    var curleft = 0;
    if (document.getElementById || document.all) {
        do  {
            curleft += el.offsetLeft-el.scrollLeft;
            curtop += el.offsetTop-el.scrollTop;
            el = el.offsetParent;
            el2 = el2.parentNode;
            while (el2 != el) {
                curleft -= el2.scrollLeft;
                curtop -= el2.scrollTop;
                el2 = el2.parentNode;
            }
        } while (el.offsetParent);

    } else if (document.layers) {
        curtop += el.y;
        curleft += el.x;
    }
    return [curtop, curleft];
};

Answered   2023-09-20 20:35:05

  • as with the other solutions even with FF 24.4 the above code does not work when border widths exist as part of the positioning layout. - anyone
  • You're a life saver. I'm working through some pretty deep GWT bugs right now and throwing this in a JSNI method solves all my problems!! - anyone

You can add two properties to Element.prototype to get the top/left of any element.

Object.defineProperty( Element.prototype, 'documentOffsetTop', {
    get: function () { 
        return this.offsetTop + ( this.offsetParent ? this.offsetParent.documentOffsetTop : 0 );
    }
} );

Object.defineProperty( Element.prototype, 'documentOffsetLeft', {
    get: function () { 
        return this.offsetLeft + ( this.offsetParent ? this.offsetParent.documentOffsetLeft : 0 );
    }
} );

This is called like this:

var x = document.getElementById( 'myDiv' ).documentOffsetLeft;

Here's a demo comparing the results to jQuery's offset().top and .left: http://jsfiddle.net/ThinkingStiff/3G7EZ/

Answered   2023-09-20 20:35:05

  • modifying Element.prototype is generally considered a bad idea. It leads to really hard to maintain code. Also, this code doesn't account for scrolling. - anyone

How about something like this, by passing ID of the element and it will return the left or top, we can also combine them:

1) find left

function findLeft(element) {
  var rec = document.getElementById(element).getBoundingClientRect();
  return rec.left + window.scrollX;
} //call it like findLeft('#header');

2) find top

function findTop(element) {
  var rec = document.getElementById(element).getBoundingClientRect();
  return rec.top + window.scrollY;
} //call it like findTop('#header');

or 3) find left and top together

function findTopLeft(element) {
  var rec = document.getElementById(element).getBoundingClientRect();
  return {top: rec.top + window.scrollY, left: rec.left + window.scrollX};
} //call it like findTopLeft('#header');

Answered   2023-09-20 20:35:05

To retrieve the position relative to the page efficiently, and without using a recursive function: (includes IE also)

var element = document.getElementById('elementId'); //replace elementId with your element's Id.
var rect = element.getBoundingClientRect();
var elementLeft,elementTop; //x and y
var scrollTop = document.documentElement.scrollTop?
                document.documentElement.scrollTop:document.body.scrollTop;
var scrollLeft = document.documentElement.scrollLeft?                   
                 document.documentElement.scrollLeft:document.body.scrollLeft;
elementTop = rect.top+scrollTop;
elementLeft = rect.left+scrollLeft;

Answered   2023-09-20 20:35:05

  • Including the all important scrollTop/scrollLeft makes this answer a bit more correct. - anyone

Here's a modern 1-liner using vanilla JS to recursively iterate over element.offsetTop and element.offsetParent:

Function:

getTop = el => el.offsetTop + (el.offsetParent && getTop(el.offsetParent))

Usage:

const el = document.querySelector('#div_id');
const elTop = getTop(el)

Advantage:

Always returns the absolute vertical offset, regardless of the current scroll position.


Traditional syntax:

function getTop(el) {
  return el.offsetTop + (el.offsetParent && getTop(el.offsetParent));
}

Answered   2023-09-20 20:35:05

  • Thanks, finding the offsetTop of the offsetParent is what helped me find the proper position. - anyone

Update:

The recursion approach (in my old answer) creates many call stacks. We can use a while loop to avoid recursion in this case:

/**
 *
 * @param {HTMLElement} el
 * @return {{top: number, left: number}}
 */
function getDocumentOffsetPosition(el) {
    let top = 0, left = 0;
    while (el !== null) {
        top += el.offsetTop;
        left += el.offsetLeft;
        el = el.offsetParent;
    }
    return {top, left};
}

Old answer:

/**
 *
 * @param {HTMLElement} el
 * @return {{top: number, left: number}}
 */
function getDocumentOffsetPosition(el) {
    var position = {
        top: el.offsetTop,
        left: el.offsetLeft
    };
    if (el.offsetParent) {
        var parentPosition = getDocumentOffsetPosition(el.offsetParent);
        position.top += parentPosition.top;
        position.left += parentPosition.left;
    }
    return position;
}

Thank ThinkingStiff for the answer, this is only another version.

Answered   2023-09-20 20:35:05

jQuery .offset() will get the current coordinates of the first element, or set the coordinates of every element, in the set of matched elements, relative to the document.

Answered   2023-09-20 20:35:05

  • For some reason it is not giving the same results in IE compared to other browsers. I think that in IE it is giving position relative to the window, so if you scroll, you will be getting different results in IE compared to others - anyone
  • offset() is confused by zoom, at least in Android Chrome, so it is useless. stackoverflow.com/a/11396681/1691517 shows zoom-tolerant way. - anyone

You might be better served by using a JavaScript framework, that has functions to return such information (and so much more!) in a browser-independant fashion. Here are a few:

With these frameworks, you could do something like: $('id-of-img').top to get the y-pixel coordinate of the image.

Answered   2023-09-20 20:35:05

I've taken @meouw's answer, added in the clientLeft that allows for the border, and then created three versions:

getAbsoluteOffsetFromBody - similar to @meouw's, this gets the absolute position relative to the body or html element of the document (depending on quirks mode)

getAbsoluteOffsetFromGivenElement - returns the absolute position relative to the given element (relativeEl). Note that the given element must contain the element el, or this will behave the same as getAbsoluteOffsetFromBody. This is useful if you have two elements contained within another (known) element (optionally several nodes up the node tree) and want to make them the same position.

getAbsoluteOffsetFromRelative - returns the absolute position relative to the first parent element with position: relative. This is similar to getAbsoluteOffsetFromGivenElement, for the same reason but will only go as far as the first matching element.

getAbsoluteOffsetFromBody = function( el )
{   // finds the offset of el from the body or html element
    var _x = 0;
    var _y = 0;
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) )
    {
        _x += el.offsetLeft - el.scrollLeft + el.clientLeft;
        _y += el.offsetTop - el.scrollTop + el.clientTop;
        el = el.offsetParent;
    }
    return { top: _y, left: _x };
}

getAbsoluteOffsetFromGivenElement = function( el, relativeEl )
{   // finds the offset of el from relativeEl
    var _x = 0;
    var _y = 0;
    while( el && el != relativeEl && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) )
    {
        _x += el.offsetLeft - el.scrollLeft + el.clientLeft;
        _y += el.offsetTop - el.scrollTop + el.clientTop;
        el = el.offsetParent;
    }
    return { top: _y, left: _x };
}

getAbsoluteOffsetFromRelative = function( el )
{   // finds the offset of el from the first parent with position: relative
    var _x = 0;
    var _y = 0;
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) )
    {
        _x += el.offsetLeft - el.scrollLeft + el.clientLeft;
        _y += el.offsetTop - el.scrollTop + el.clientTop;
        el = el.offsetParent;
        if (el != null)
        {
            if (getComputedStyle !== 'undefined')
                valString = getComputedStyle(el, null).getPropertyValue('position');
            else
                valString = el.currentStyle['position'];
            if (valString === "relative")
                el = null;
        }
    }
    return { top: _y, left: _x };
}

If you are still having problems, particularly relating to scrolling, you could try looking at http://www.greywyvern.com/?post=331 - I noticed at least one piece of questionable code in getStyle which should be fine assuming browsers behave, but haven't tested the rest at all.

Answered   2023-09-20 20:35:05

  • Interesting ... but on Edge getAbsoluteOffsetFromBody(element).top returns a different value as I scroll, in Chrome it stays consistent as I scroll. It seems Edge is adjusting with scroll position. When the element is scrolled out of view I get a negative value. - anyone
  • getAbsoluteOffsetFromRelative made my day, i had to reproduce bootstrap tooltip without Javascript of bootstrap, it helped me a lot. - anyone
  • Just in case if Meouw change their username, link to answer: stackoverflow.com/a/442474/3654837. (I don't want to bump this old thread so yeah, I put in comment) - anyone

Difference between small and little

function getPosition( el ) {
    var x = 0;
    var y = 0;
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
    x += el.offsetLeft - el.scrollLeft;
    y += el.offsetTop - el.scrollTop;
    el = el.offsetParent;
    }
    return { top: y, left: x };
}

Look a example coordinates: http://javascript.info/tutorial/coordinates

Answered   2023-09-20 20:35:05

  • This unfortunately does not work for all elements one might find inside a modern HTML document. Embedded <svg> elements, for example, do not have offsetLeft, offsetTop, and offsetParent properties. - anyone
  • Its just DIV or IMG, not SVG. View "Look a example coordinates"? you can find object svg is position call getOffsetRect, try and depend object work. - anyone

If you are using jQuery, this could be a simple solution:

<script>
  var el = $("#element");
  var position = el.position();
  console.log( "left: " + position.left + ", top: " + position.top );
</script>

Answered   2023-09-20 20:35:05

if using jQuery, the dimensions plugin is excellent and allows you specify exactly what you want.

e.g.

Relative position, absolute position, absolute position without padding, with padding...

It goes on, let's just say there is a lot you can do with it.

Plus the bonus of using jQuery is it's lightweight file size and easy use, you won't go back to JavaScript without it afterwards.

Answered   2023-09-20 20:35:05

This is the best code I've managed to create (works in iframes as well, unlike jQuery's offset()). Seems webkit has a bit of a different behavior.

Based on meouw's comment:

function getOffset( el ) {
    var _x = 0;
    var _y = 0;
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
        _x += el.offsetLeft - el.scrollLeft;
        _y += el.offsetTop - el.scrollTop;
        // chrome/safari
        if ($.browser.webkit) {
            el = el.parentNode;
        } else {
            // firefox/IE
            el = el.offsetParent;
        }
    }
    return { top: _y, left: _x };
}

Answered   2023-09-20 20:35:05

  • Note that you'll need jQuery to use $.browser.webkit; You'll need to play around with navigator.userAgent to do the same with pure JavaScript. - anyone
  • $.browser is no longer available in the latest version of jQuery - anyone
  • unfortunately even with FF 24.4 the above code does not work when border widths exist as part of the positioning layout. - anyone

The cleanest approach I have found is a simplified version of the technique used by jQuery's offset. Similar to some of the other answers it starts with getBoundingClientRect; it then uses the window and the documentElement to adjust for scroll position as well as things like the margin on the body (often the default).

var rect = el.getBoundingClientRect();
var docEl = document.documentElement;

var rectTop = rect.top + window.pageYOffset - docEl.clientTop;
var rectLeft = rect.left + window.pageXOffset - docEl.clientLeft;

var els = document.getElementsByTagName("div");
var docEl = document.documentElement;

for (var i = 0; i < els.length; i++) {

  var rect = els[i].getBoundingClientRect();

  var rectTop = rect.top + window.pageYOffset - docEl.clientTop;
  var rectLeft = rect.left + window.pageXOffset - docEl.clientLeft;

  els[i].innerHTML = "<b>" + rectLeft + ", " + rectTop + "</b>";
}
div {
  width: 100px;
  height: 100px;
  background-color: red;
  border: 1px solid black;
}
#rel {
  position: relative;
  left: 10px;
  top: 10px;
}
#abs {
  position: absolute;
  top: 250px;
  left: 250px;
}
<div id="rel"></div>
<div id="abs"></div>
<div></div>

Answered   2023-09-20 20:35:05

To get the total offset of an element, you could recursively sum up all parent offsets:

function getParentOffset(el): number {
if (el.offsetParent) {
    return el.offsetParent.offsetTop + getParentOffset(el.offsetParent);
} else {
    return 0;
}
}

with this utility function the total top offset of a dom element is:

el.offsetTop + getParentOffset(el);

Answered   2023-09-20 20:35:05

While this is very likely to be lost at the bottom of so many answers, the top solutions here were not working for me.
As far as I could tell neither would any of the other answers have helped.

Situation:
In an HTML5 page I had a menu that was a nav element inside a header (not THE header but a header in another element).
I wanted the navigation to stick to the top once a user scrolled to it, but previous to this the header was absolute positioned (so I could have it overlay something else slightly).
The solutions above never triggered a change because .offsetTop was not going to change as this was an absolute positioned element. Additionally the .scrollTop property was simply the top of the top most element... that is to say 0 and always would be 0.
Any tests I performed utilizing these two (and same with getBoundingClientRect results) would not tell me if the top of the navigation bar ever scrolled to the top of the viewable page (again, as reported in console, they simply stayed the same numbers while scrolling occurred).

Solution
The solution for me was utilizing

window.visualViewport.pageTop

The value of the pageTop property reflects the viewable section of the screen, therefore allowing me to track where an element is in reference to the boundaries of the viewable area.

Probably unnecessary to say, anytime I am dealing with scrolling I expect to use this solution to programatically respond to movement of elements being scrolled.
Hope it helps someone else.
IMPORTANT NOTE: This appears to work in Chrome and Opera currently & definitely not in Firefox (6-2018)... until Firefox supports visualViewport I recommend NOT using this method, (and I hope they do soon... it makes a lot more sense than the rest).


UPDATE:
Just a note regarding this solution.
While I still find what I discovered to be very valuable for situations in which "...programmatically respond to movement of elements being scrolled." is applicable. The better solution for the problem that I had was to use CSS to set position: sticky on the element. Using sticky you can have an element stay at the top without using javascript (NOTE: there are times this will not work as effectively as changing the element to fixed but for most uses the sticky approach will likely be superior)

UPDATE01:
So I realized that for a different page I had a requirement where I needed to detect the position of an element in a mildly complex scrolling setup (parallax plus elements that scroll past as part of a message). I realized in that scenario that the following provided the value I utilized to determine when to do something:

  let bodyElement = document.getElementsByTagName('body')[0];
  let elementToTrack = bodyElement.querySelector('.trackme');
  trackedObjPos = elementToTrack.getBoundingClientRect().top;
  if(trackedObjPos > 264)
  {
    bodyElement.style.cssText = '';
  }

Hope this answer is more widely useful now.

Answered   2023-09-20 20:35:05

I did it like this so it was cross-compatible with old browsers.

// For really old browser's or incompatible ones
    function getOffsetSum(elem) {
        var top = 0,
            left = 0,
            bottom = 0,
            right = 0

         var width = elem.offsetWidth;
         var height = elem.offsetHeight;

        while (elem) {
            top += elem.offsetTop;
            left += elem.offsetLeft;
            elem = elem.offsetParent;
        }

         right = left + width;
         bottom = top + height;

        return {
            top: top,
            left: left,
            bottom: bottom,
            right: right,
        }
    }

    function getOffsetRect(elem) {
        var box = elem.getBoundingClientRect();

        var body = document.body;
        var docElem = document.documentElement;

        var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop;
        var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft;

        var clientTop = docElem.clientTop;
        var clientLeft = docElem.clientLeft;


        var top = box.top + scrollTop - clientTop;
        var left = box.left + scrollLeft - clientLeft;
        var bottom = top + (box.bottom - box.top);
        var right = left + (box.right - box.left);

        return {
            top: Math.round(top),
            left: Math.round(left),
            bottom: Math.round(bottom),
            right: Math.round(right),
        }
    }

    function getOffset(elem) {
        if (elem) {
            if (elem.getBoundingClientRect) {
                return getOffsetRect(elem);
            } else { // old browser
                return getOffsetSum(elem);
            }
        } else
            return null;
    }

More about coordinates in JavaScript here: http://javascript.info/tutorial/coordinates

Answered   2023-09-20 20:35:05

    
HTML program to show (x, y) of an
element by dragging mouse over it  you just copied it and use it on your own 
<!DOCTYPE html>
<html>
    <head>
        <title>
            position of an element
        </title>
        
        <!-- scropt to get position -->
        <script type = "text/javascript">
            function getPositionXY(element) {
                var rect = element.getBoundingClientRect();
                document.getElementById('text').innerHTML
                = 'X: ' + rect.x + '<br>' + 'Y: ' + rect.y;
            }
        </script>
    </head>
    
    <body>
        <p>Move the mouse over the text</p>
        
        <div onmouseover = "getPositionXY(this)">
            Position:
            <p id = 'text'></p>
        </div>
    
    </body>
</html>                 

Answered   2023-09-20 20:35:05

i could just like element.offsetLeft or element.offsetTop. Example : document.getElementById('profileImg').offsetLeft

Answered   2023-09-20 20:35:05

This simple example retrieves the DOMRect object representing the bounding client rect of a simple element, and prints out its properties below it.

for more descriptions

let elem = document.querySelector("div");
let rect = elem.getBoundingClientRect();
for (const key in rect) {
  if (typeof rect[key] !== "function") {
    let para = document.createElement("p");
    para.textContent = `${key} : ${rect[key]}`;
    document.body.appendChild(para);
  }
}
div {
  width: 400px;
  height: 200px;
  padding: 20px;
  margin: 50px auto;
  background: purple;
}
<div></div>

Answered   2023-09-20 20:35:05

I successfully used Andy E's solution to position a bootstrap 2 modal depending on what link in a table row a user clicks on. The page is a Tapestry 5 page and javascript below is imported in the java page class.

javascript:

function setLinkPosition(clientId){
var bodyRect = document.body.getBoundingClientRect(),
elemRect = clientId.getBoundingClientRect(),
offset   = elemRect.top - bodyRect.top;
offset   = offset + 20;
$('#serviceLineModal').css("top", offset);

}

My modal code:

<div id="serviceLineModal" class="modal hide fade add-absolute-position" data-backdrop="static" 
 tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="top:50%;">
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
    <h3 id="myModalLabel">Modal header</h3>
</div>

<div class="modal-body">
    <t:zone t:id="modalZone" id="modalZone">
        <p>You selected service line number: ${serviceLineNumberSelected}</p>
    </t:zone>
</div>

<div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <!-- <button class="btn btn-primary">Save changes</button> -->
</div>

The link in the loop:

<t:loop source="servicesToDisplay" value="service" encoder="encoder">
<tr style="border-right: 1px solid black;">       
    <td style="white-space:nowrap;" class="add-padding-left-and-right no-border"> 
        <a t:type="eventLink" t:event="serviceLineNumberSelected" t:context="service.serviceLineNumber" 
            t:zone="pageZone" t:clientId="modalLink${service.serviceLineNumber}"
            onmouseover="setLinkPosition(this);">
            <i class="icon-chevron-down"></i> <!-- ${service.serviceLineNumber} -->
        </a>
    </td>

And the java code in the page class:

void onServiceLineNumberSelected(String number){
    checkForNullSession();
    serviceLineNumberSelected = number;
    addOpenServiceLineDialogCommand();
    ajaxResponseRenderer.addRender(modalZone);
}

protected void addOpenServiceLineDialogCommand() {
    ajaxResponseRenderer.addCallback(new JavaScriptCallback() {
        @Override
        public void run(JavaScriptSupport javascriptSupport) {
            javascriptSupport.addScript("$('#serviceLineModal').modal('show');");
        }
    });
}

Hope this helps someone, this post helped out.

Answered   2023-09-20 20:35:05

  • This js code helped me, I have an old webforms app using multiple placeholders inject .aspx pages and I could not figure out how to appendChild() of a popup box I was creating to get it into the viewport because the entire DOM tree is whack with the multiple placeholders and incorrect markup. Using the body.getBoundingClientRect() then using its top in positioning was what I needed. Thanks. - anyone

After much research and testing this seems to work

function getPosition(e) {
    var isNotFirefox = (navigator.userAgent.toLowerCase().indexOf('firefox') == -1);
    var x = 0, y = 0;
    while (e) {
        x += e.offsetLeft - e.scrollLeft + (isNotFirefox ? e.clientLeft : 0);
        y += e.offsetTop - e.scrollTop + (isNotFirefox ? e.clientTop : 0);
        e = e.offsetParent;
    }
    return { x: x + window.scrollX, y: y + window.scrollY };
}

see http://jsbin.com/xuvovalifo/edit?html,js,output

Answered   2023-09-20 20:35:05

Just thought I'd throw this out there as well.
I haven't been able to test it in older browsers, but it works in the latest of the top 3. :)

Element.prototype.getOffsetTop = function() {
    return ( this.parentElement )? this.offsetTop + this.parentElement.getOffsetTop(): this.offsetTop;
};
Element.prototype.getOffsetLeft = function() {
    return ( this.parentElement )? this.offsetLeft + this.parentElement.getOffsetLeft(): this.offsetLeft;
};
Element.prototype.getOffset = function() {
    return {'left':this.getOffsetLeft(),'top':this.getOffsetTop()};
};

Answered   2023-09-20 20:35:05

This is easy as two lines in JS :

var elem = document.getElementById("id");    
alert(elem.getBoundingClientRect());

Answered   2023-09-20 20:35:05

  • This answer is incomplete and doesn't add anything to previous answers. - anyone

Since different browsers are rendering border, padding, margin and etc in different way. I wrote a little function to retrieve top and left positions of specific element in every root element that you want in precise dimension:

function getTop(root, offset) {
    var rootRect = root.getBoundingClientRect();
    var offsetRect = offset.getBoundingClientRect();
    return offsetRect.top - rootRect.top;
}

For retrieve left position you must return:

    return offsetRect.left - rootRect.left;

Answered   2023-09-20 20:35:05