1. Obtain coordinates
1. offset ()
The offset () method returns or sets the offset (location) of the matching element relative to the document ). (That is, the viewport coordinates)
The object returned by this method contains two integer attributes: top and left, in pixels.
This method is only valid for visible elements.
2. position ()
The position () method returns the position (offset) of the matching element relative to the parent element ). (Relative to the document coordinate of the parent element)
The object returned by this method contains two integer attributes: top and left, in pixels.
This method is only valid for visible elements.
3. offsetParent ()
The offsetParent () method returns the most recent ancestor location element.
A positioning element refers to an element whose CSS position attribute is set to relative, absolute, or fixed.
You can use jQuery to set the position, or use the position attribute of CSS.
Ii. Obtain dimensions
1. width () and height () Methods
The width () method is used to set or return the width of an element (excluding the padding, border, or margin ).
The height () method sets or returns the height of an element (excluding the padding, border, or margin ).
2. innerWidth () and innerHeight () Methods
The innerWidth () method returns the width (including the padding) of the element ).
The innerHeight () method returns the height of the element (including the padding ).
3. outerWidth () and outerHeight () Methods
The outerWidth () method returns the width of the element (including the padding and border ).
The outerHeight () method returns the height of an element, including the padding and border ).
The outerWidth (true) method returns the width of the element (including the padding, border, and margin ).
The outerHeight (true) method returns the height of an element, including the padding, border, and margin ).