The right view is about the JS element.getBoundingClientRect() function, which gives you
viewport-relative coordinates of an HTML element.
The viewport is the currently visible part of the HTML page (that may be much bigger).
By using boundingClientRect together with window.page*Offset (see left view)
you can calculate any element's page-absolute coordinates.
On small-devices you might find the getBoundingClientRect() display for this page
in bottom-right corner, because some do not implement CSS position: fixed as specified.
CAUTION: the values you see here may be browser-specific! For example, Firefox
provides scrollTop on the document.documentElement,
while Webkit browsers like Opera and Chrome provide it on document.body.
| pageXOffset | Distance between left edge of page and left edge of viewport |
| pageYOffset | Distance between upper edge of page and upper edge of viewport |
| innerWidth | Width of page, including scrollbars, excluding browser edge decorations |
| innerHeight | Height of page, including scrollbars, excluding browser title- and tool-bars |
| outerWidth | Width of browser window, including browser edge decorations |
| outerHeight | Width of browser window, including browser title bar |
| scrollX | Same as pageXOffset, but deprecated |
| scrollY | Same as pageYOffset, but deprecated |
| scrollLeft | Distance between left edge of element and left edge of its visible part |
| scrollTop | Distance between upper edge of element and upper edge of its visible part |
| scrollWidth | Overall width of element, including overflowing parts |
| scrollHeight | Overall height of element, including overflowing parts |
| clientWidth | Visible width, excluding margin, border, scrollbar and overflow |
| clientHeight | Visible height, excluding margin, border, scrollbar and overflow |
| clientTop | Thickness of border on top of the element |
| clientLeft | Thickness of border on left of the element |