Determining the position of an element relative to the document

Question

What is the easiest way to determine the position of elements relative to the document / body / browser window? Right now I'm using'.offsetLeft / offsetTop ', but this method only gives the position relative to the parent element, so you need to determine how many parents belong to the body element in order to know that the relativistic position to the body / browser is the position of the window / document. This method is also cumbersome.

Answer 1

You can pass offsetParent to the top level of the DOM.

 function getOffsetLeft( elem ) { var offsetLeft = 0; do { if ( !isNaN( elem.offsetLeft ) ) { offsetLeft += elem.offsetLeft; } } while( elem = elem.offsetParent ); return offsetLeft; } 

Answer 2

You can get top and left without going through the DOM as follows:

 function getCoords(elem) { // crossbrowser version var box = elem.getBoundingClientRect(); var body = document.body; var docEl = document.documentElement; var scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop; var scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft; var clientTop = docEl.clientTop || body.clientTop || 0; var clientLeft = docEl.clientLeft || body.clientLeft || 0; var top = box.top + scrollTop - clientTop; var left = box.left + scrollLeft - clientLeft; return { top: Math.round(top), left: Math.round(left) }; } 

Answer 3

You can use element.getBoundingClientRect() to retrieve the position of an element relative to the viewport.

Use scrollY ( document.documentElement.scrollTop cross-browser compatible) to calculate viewport offset.

The sum of these two values ​​will contain the position of the element relative to the document:

 subjectRect.top + document.documentElement.scrollTop 

Answer 4

If you use npm, document-offset is interesting and seems to use the approaches from the other answers here. Usage is quite simple:

 var offset = require('document-offset') var target = document.getElementById('target') console.log(offset(target)) // => {top: 69, left: 108} 

Answer 5

http://www.quirksmode.org/js/findpos.html Explains the best way to do this, in general, you are on the right track, you need to find the offsets and cross the parent tree.

Answer 6

I suggest using

 element.getBoundingClientRect() 

as suggested here instead of calculating manual offset through offsetLeft, offsetTop and offsetParent. as suggested here Under some circumstances * manual traversal gives incorrect results. See This Plunker: http://plnkr.co/pC8Kgj

* When an element is inside a scrollable parent with static (= default) positioning.

Answer 7

If you don't mind using jQuery, you can use the offset() function. Refer to the documentation if you want to know more about this feature.

Answer 8

Tested in IE 11, Chrome 62, Firefox 56, Edge 38:

 var box = domElement.getBoundingClientRect(); var offsetTop = Math.floor(box.top && box.top || box.y && box.y || 0); 

Use left / x for offsetLeft.