JQuery offset,position,offsetparent,scrollleft,scrolltop HTML control positioning CSS Position

Position app: Click a button and pop up a popup on the right side of the button
1, the cue box is positioned relative to the screen, then use offset to get the current button relative to the top and left of the body, and then through $ (' body '). prepend (tipcontent); Add hint control to body
Note that Tipcontent uses absolute positioning, and set the value of Top,left, when the tipcontent added to the front of the body, because there is nothing in front of the tipcontent, so it is based on the body as the basis of the top , the left value is positioned

1. $ (this). Offset (). Left;
2. $ (this). Offset (). Top;
3. $ (' body '). prepend (tipcontent);

2, the cue box is positioned relative to the clicked button (that is, the Cue box appears next to the button), then use position to get the current button relative to the top and left of the offset parent, and then through $ (this). After (tipcontent); Add the hint control to the back of the button (sibling node), so the offset parent and the button's offset parent must be the same for the appended prompt control! , it also achieves the effect that the ToolTip is positioned relative to the button!

Note that the tipcontent uses absolute positioning, when the tipcontent is added to the back of the button (the sibling node, they have the same offset parent)

Absolute: Absolute positioning, where the element is positioned relative to its first positioned ancestor element (offset parent non-static), because the button and cue controls are side-by, regardless The first positioned ancestor element (not static) that is used as a benchmark, the top,left distance of the button and cue control relative to the base control can be simply panned by +-!

1. $ (this). Position (). Left;
2. $ (this). Position (). Top;
3. $ (this). After (tipcontent);

Offset: Shift, shift , shift

offset (): Gets the first element in a collection of matching elementsThe value of the current coordinate relative to the document (relative to the left of the body, top).
The returned object contains two shaping properties: Top and left.
IfThe. Offset () method is more useful when positioning an element on top of an already existing element (especially for drag-and-drop operations).

position (): Gets the first element in the current matching element collectionThe value of the current coordinate relative to the offset parent (relative to the left, top of offset parent element).
The returned object contains two shaping properties: Top and left.
If you want to letAn element is positioned close to another element, and the 2 elements are contained within another DOM element, and the. Position () method is more useful.

jquery does not support obtaining the coordinates of the body element relative to the hidden element, or containing the borders, margins, padding properties.(The offset () and position () methods are all! ）

offsetParent (): Gets the nearest ancestor element after being positioned!
Give you a JQuery object whose offsetparent () method willThe DOM tree searches for all the ancestor elements of this jquery object and returns a JQuery object that represents the closest ancestor element to the element.
An element that is positioned means that it contains a CSS positional property (position), and its value isrelative,absolute or fixed. its value is not the default value of the CSS position property static! The

offsetparent property returns a reference to an object that is closest to the element that called offsetparent (closest to the containing hierarchy) and is a container element that has been positioned in CSS.
If the container element does not have CSS positioning, the offsetparent property is referenced to the root element (the HTML element in standard compatibility mode; The body element in the weird rendering mode).
When the style.display of the container element is set to "none" (except IE and opera), the offsetparent property returns NULL.

scrollleft (): gets the first element in a collection of matching elements This distance is equal to the pixel value from the selected element to the left of the horizontal scroll bar.
scrolltop () : Gets the first element in a collection of matching elements This distance is equal to the pixel value from the selected element to the top of the vertical scroll bar.
note: When an element is hidden, calling ScrollTop, ScrollLeft (), or the animate () method does not work correctly. The

CSS Position property: Position property indicates the The positioning method of an element. There are 4 possible values: static, relative, absolute or fixed:

• Static: Default value, elements are rendered in the order in which they appear in the document flow
• Absolute: Absolute positioning, where the element is positioned relative to its first positioned ancestor element (not static)
• Fixed: Elements are positioned relative to the browser window
• Relative: The element is positioned relative to its normal position, so "left:20" represents a distance of 20 pixels to the left, based on the normal position of the element.

JQuery offset,position,offsetparent,scrollleft,scrolltop HTML control positioning CSS Position