.position()

Categories: Method Overrides | Methods | Utilities

.position( options )Returns: jQueryversion added: 1.8

Description: Position an element relative to another.

  • .position( options )

    • options
      Type: Object
      • my (default: "center")
        Type: String
        Defines which position on the element being positioned to align with the target element: "horizontal vertical" alignment. A single value such as "right" will be normalized to "right center", "top" will be normalized to "center top" (following CSS convention). Acceptable horizontal values: "left", "center", "right". Acceptable vertical values: "top", "center", "bottom". Example: "left top" or "center center".
      • at (default: "center")
        Type: String
        Defines which position on the target element to align the positioned element against: "horizontal vertical" alignment. See the my option for full details on possible values.
      • of (default: null)
        Type: Selector or Element or jQuery or Event
        Which element to position against. If you provide a selector or jQuery object, the first matching element will be used. If you provide an event object, the pageX and pageY properties will be used. Example: "#top-menu"
      • offset (default: null)
        Type:
        Distance in pixels to adjust the position of the element horizontally and vertically, e.g. "10 50". A single value such as "50" will apply to both directions.
      • collision (default: "flip")
        Type: String

        When the positioned element overflows the window in some direction, move it to an alternative position. Similar to my and at, this accepts a single value or a pair for horizontal/vertical, e.g., "flip", "fit", "fit flip", "fit none".

        • "flip": Flips the element to the opposite side of the target and the collision detection is run again to see if it will fit. Whichever side allows more of the element to be visible will be used.
        • "fit": Shift the element away from the edge of the window.
        • "none": Does not apply any collision detection.
      • using (default: null)
        Type: Function()
        When specified, the actual property setting is delegated to this callback. Receives a hash of top and left values for the position that should be set and can be forwarded to .position() or .animate().

The jQuery UI .position() method allows you to position an element relative to the window, document, another element, or the cursor/mouse, without worrying about offset parents.

Note: jQuery UI does not support positioning hidden elements.

This is a standalone jQuery plugin and has no dependencies on other jQuery UI components.

This plugin extends jQuery's built-in .position() method. If jQuery UI is not loaded, calling the .position() method may not fail directly, as the method still exists. However, the expected behavior will not occur.

Example:

A simple jQuery UI Position example.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>position demo</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.8.24/themes/base/jquery-ui.css">
  <style>
  .positionDiv {
    position: absolute;
    width: 75px;
    height: 75px;
    background: green;
  }
  </style>
  <script src="//code.jquery.com/jquery-1.8.2.js"></script>
  <script src="//code.jquery.com/ui/1.8.24/jquery-ui.js"></script>
</head>
<body>
 
<div id="targetElement">
  <div class="positionDiv" id="position1"></div>
  <div class="positionDiv" id="position2"></div>
  <div class="positionDiv" id="position3"></div>
  <div class="positionDiv" id="position4"></div>
</div>
 
<script>
$( "#position1" ).position({
  my: "center",
  at: "center",
  of: "#targetElement"
});
 
$( "#position2" ).position({
  my: "left top",
  at: "left top",
  of: "#targetElement"
});
 
$( "#position3" ).position({
  my: "right center",
  at: "right bottom",
  of: "#targetElement"
});
 
$( document ).mousemove(function( event ) {
  $( "#position4" ).position({
    my: "left bottom",
    of: event,
    offset: "3 -3",
    collision: "fit"
  });
});
</script>
 
</body>
</html>

Demo: