The jQuery UI framework provides many utility functions to the user, one of which is postion() method. The position() method helps in positioning any element relative to any target element in the page like window, any parent element, document or mouse. It describes the position of any element based on properties like “top”, “left”, “right” and “bottom”.
- It does not support hidden elements positioning features.
- Only child elements are positioned relative to any other element or target.
$(selector).position( options )
where options are of type objects which defines how the elements are to be positioned with respect to the target or parent element. We will explain only few of them that are commonly used:
- my: It is of string type. This option mentions the position of element which is required to align with the parent target element. Its default value is center.
- at: It is of string type. This option mentions the position or location of the parent target element against which the child element is positioned. Its default value is center.
- of: The type is selector or parent element. This option mentions the parent or target elements to position against it. Its default value is null.
- collision: It is of string type. This option mentions the rules applied when the positioned element goes beyond the document window. Default value is flip.
Links for jQuery UI:
href=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css” rel=”stylesheet” type=”text/css” />
Example 1: In the following example, the basic default position() method is demonstrated. “divID1” and “divID2” are fixed with their “my” and “at” locations relative to parent element “mainDivID”. The mouse event is handled for “divID3” . The position is designed to move around the document keeping a gap of 10 at the left and top.
Example 2: In the following example code position method is demonstrated along with all the above mentioned options or parameters.
- jQuery | position() with Examples
- What is the difference between position() and offset() in jQuery ?
- How to get position of an element relative to the document or parent using jQuery ?
- jQuery | jQuery.fx.interval Property with example
- jQuery | jQuery.fx.off Property
- jQuery | jQuery.support Property
- jQuery | jquery Property
- Retrieve the position (X,Y) of an element using HTML
- How to position a div at the bottom of its container using CSS?
- CSS | list-style-position Property
- CSS | background-position Property
- CSS | object-position Property
- HTML | DOM Geolocation position Property
- HTML | DOM Style position Property
- How to place text in an image at any desired position ?
- How to position a div at specific coordinates ?
- p5.js | position() Function
- HTML | DOM Progress position Property
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.