jQuery UI | position() Method

Last Updated : 29 Jan, 2022

The jQuery UI framework provides many utility functions to the user, one of which is position() 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”.
Note:

It does not support hidden elements positioning features.
Only child elements are positioned relative to any other element or target.

Syntax:

$(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:
Options:

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:

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js”></script>
<script src=”https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js”></script>
<link
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.

html

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1">
    <title>jQuery UI position method</title>
    <link href=
"http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
          rel="stylesheet">
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
 
    <style>
        .class {
            .height: 10px;
        }
         
        .subDivClass {
            position: absolute;
            width: 80px;
            height: 80px;
            background: green;
            padding: 10px 10px;
        }
         
        #mainDivID {
            width: 300px;
            height: 300px;
            padding-top: 50px;
            background: #e9e9e9;
            border: 1px solid black
        }
    </style>
    <script>
        $(function() {
            // Position to the center with respect to the parent mainDivID
            $("#divID1").position({
                my: "center",
                at: "center",
                of: "#mainDivID"
            });
            // Position to the  top right keeping a gap of 10
            $("#divID2").position({
                my: "right-10 top+10",
                at: "right top",
                of: "#mainDivID"
            });
            /* Position to move around 
            keeping a gap of 10 at the left and top */
            $(document).mousemove(function(event) {
                $("#divID3").position({
                    my: "left+10 top+10",
                    of: event,
                    collision: "fit"
                });
            });
        });
    </script>
</head>
 
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <b>jQuery UI position utility </b>
    <div class="height"> </div>
    <div id="mainDivID">
        <div class="subDivClass" id="divID1">Position 1</div>
        <div class="subDivClass" id="divID2">Position 2</div>
        <div class="subDivClass" id="divID3">Position 3</div>
    </div>
</body>
 
</html>

Output:

Example 2: In the following example code position method is demonstrated along with all the above mentioned options or parameters.

html

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1">
    <title>jQuery UI position method</title>
    <link href=
"http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
          rel="stylesheet">
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
 
    <style>
        .height {
            height: 10px;
        }
         
        #parentDivID {
            width: 500px;
            height: 120px;
            padding: 15px;
            border: 1px solid black;
            background-color: green;
            text-align: center;
        }
         
        .positionableClass {
            position: absolute;
            display: block;
            border-radius: 25%;
            background-color: #e9e9e9;
            text-align: center;
        }
         
        #positionableId {
            width: 80px;
            height: 80px;
        }
         
        #optionsDivID {
            padding: 10px;
            margin-top: 20px;
        }
         
        .selectDiv {
            padding-bottom: 20px;
        }
         
        select {
            margin-left: 15px;
        }
    </style>
    <script>
        $(function() {
            function position() {
                $(".positionableClass").position({
 
                    my: $("#myHorizontalID").val() +
                  " " + $("#myVerticalID").val(),
                    at: $("#atHorizontalID").val()
                  + " " + $("#atVerticalID").val(),
                    of: $("#parentDivID"),
                    collision: $("#collHorizontalID").val() +
                  " " + $("#collVerticalID").val()
 
                });
            }
 
            $("select").on("click keyup change", position);
 
            $("#parentDivID").draggable({
                drag: position
            });
 
            position();
        });
    </script>
</head>
 
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <b>jQuery UI position method </b>
    <div class="height"> </div>
 
    <div id="parentDivID">
         
 
<p>
            This is the parent target element.
        </p>
 
 
    </div>
 
    <div class="positionableClass" id="positionableId">
         
 
<p>
            Change my position
        </p>
 
 
    </div>
 
    <div id="optionsDivID">
 
        <div class="selectDiv">
            <b>Select "my" positions :</b>
            <select id="myHorizontalID">
                <option value="left">left</option>
                <option value="center">center</option>
                <option value="right">right</option>
            </select>
            <select id="myVerticalID">
                <option value="top">top</option>
                <option value="center">center</option>
                <option value="bottom">bottom</option>
            </select>
        </div>
        <div class="selectDiv">
            <b>Select "at" positions :</b>
            <select id="atHorizontalID">
                <option value="left">left</option>
                <option value="center">center</option>
                <option value="right">right</option>
            </select>
            <select id="atVerticalID">
                <option value="top">top</option>
                <option value="center">center</option>
                <option value="bottom">bottom</option>
            </select>
        </div>
        <div class="selectDiv">
            <b>Select collision options:</b>
            <select id="collHorizontalID">
                <option value="flip">flip</option>
                <option value="fit">fit</option>
                <option value="flipfit">flipfit</option>
                <option value="none">fit none</option>
            </select>
            <select id="collVerticalID">
                <option value="flip">flip</option>
                <option value="fit">fit</option>
                <option value="flipfit">flipfit</option>
                <option value="none">none</option>
            </select>
        </div>
    </div>
 
</body>
 
</html>