1. Offset() in Jquery

Get the relative offset of the matching element in the current viewport.

The position is always calculated relative to the document, regardless of the position attribute of the element's parent or ancestor element.

The returned object contains two integer properties: top and

left. This method only works on visible elements.

For example:

2. Position() in Jquery

Gets the offset of the matching element relative to the parent element.

More generally, it is the position of the nearest parent element or ancestor element of the element containing position:relative. If no such parent or ancestor element is found, the position is calculated relative to the document (i.e., the upper left corner of the viewport).

The returned object contains two integer properties: top and left. For accurate calculations, use pixel units for filler, border, and fill properties.

For example:

The difference between offset() and position()

1. The offset() method obtains the relative offset of the matching element in the current window. The window here refers to the window of the current page, excluding the browser's menu bar, etc. Of course, we don't need to use jquery to control the entire browser. What we want to control is the page window.

2. The position() method obtains the offset of the matching element relative to the parent element. That is, what is obtained is the offset of the element relative to the nearest parent element with absolute positioning or relative positioning. If all parent elements are in the default static positioning mode, the processing method is the same as offset(), which is the offset of the current window.

3. When using the position() method, if all its parent elements are in the default positioning (static) mode, the processing method is the same as offset(), which is the relative offset of the current window

4. Using the offset() method, no matter how the element is positioned or its parent element is positioned, the offset of the element relative to the current viewport is obtained.

5. Generally, if the element B to be displayed is stored under the same parent element of element A (that is, B is the sibling node of A), use position() at this time

is the most appropriate; if the displayed element B is stored at the top or bottom of the DOM (that is, its parent element is the body). It is best to use offset() at this time.