getBoundingClientRect() to get the position of the page element
document.documentElement .getBoundingClientRect
This method returns an object to obtain the left, top, right and bottom positions of an element on the page relative to the browser window, which represent the top, left and right of the element respectively. , the offset pixel values of the lower four boundaries relative to the upper left corner of the browser window (note, not the upper left corner of the document area). And this method is no longer IE Only. FF3.0 and Opera9.5 already support this method. It can be said that the efficiency of obtaining the position of page elements has been greatly improved, so obtaining an element on the page is compared with browsing. The offset of the browser window becomes the use of getBoundingClientRect. According to an article, it's awsome, so handsome =. =Because you don’t have to worry about offset, pagex, clientx, etc., etc. In previous versions of Opera and Firefox, it was necessary to loop through to obtain the absolute position of an element on the page.
Code example:
Demo
For convenience, the Demo directly uses absolutely positioned elements