jQuery UI API - `.position()`

Usage

Description: Position an element relative to another element.

Returns: jQuery

Version Added: 1.8

Parameter	Type	Description
options	Object	my (default: "center")<br> Type: String<br> Description: Defines the position of the element to be positioned relative to 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". For example, "left top" or "center center". Each dimension can also include offsets, in pixels or percentages, such as "right+10 top-25%". Percentage offsets are relative to the element being positioned.<br> <br> <br> at (default: "center")<br> Type: String<br> Description: Defines the position of the target element relative to the element to be positioned: "horizontal vertical" alignment. For more details, see the possible values on the my option. Percentage offsets are relative to the target element.<br> <br> <br> of (default: null)<br> Type: Selector or Element or jQuery or Event<br> Description: The element to be positioned. If you provide a selector or jQuery object, the first matched element will be used. If you provide an event object, the pageX and pageY properties will be used, for example "#top-menu".<br> <br> <br> collision (default: "flip")<br> Type: String<br> Description: Moves the element to another position when it overflows the window in certain directions. Similar to the my and at options, this option accepts a single value or a pair of horizontal/vertical values. For example: "flip", "fit", "fit flip", "fit none".<br> <br> <br> "flip": Flips the element to the opposite side of the target and then applies collision detection again to see if it will fit. Whichever side allows more of the element to be visible will be used.<br> <br> <br> "fit": Shifts the element away from the edge of the window.<br> <br> <br> "flipfit": Applies both flip and fit logic, placing the element on whichever side allows more of the element to be visible and then ensuring as much of the element is visible as possible.<br> <br> <br> "none": No collision detection is applied.<br> <br> <br> <br> <br> using (default: null)<br> Type: Function()<br> Description: When specified, the actual property setting is delegated to this callback. Accepts two parameters: the first is a hash of top and left values for the position that can be forwarded to .css() or .animate(); the second provides feedback about the position and dimensions of both elements, as well as the computed relative position. Both target and element have the following properties: element, left, top, width, height. Additionally, there are horizontal, vertical, and important, providing twelve possible directions, such as { horizontal: "center", vertical: "left", important: "horizontal" }.<br> <br> <br> within (default: window)<br> Type: Selector or Element or jQuery<br> Description: The element to be positioned within, which affects collision detection. If you provide a selector or jQuery object, the first matched element will be used.

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.

The plugin extends the built-in .position() method from jQuery. If jQuery UI is not loaded, calling the .position() method will not fail directly since the method exists in jQuery. However, the expected behavior will not occur.

Example

A simple jQuery UI positioning example.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>.position() Example</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <style>
  .positionDiv {
    position: absolute;
    width: 75px;
    height: 75px;
    background: green;
  }
  </style>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/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+3 bottom-3",
    of: event,
    collision: "fit"
  });
});
</script>

</body>
</html>

View Demo

❮ Api Fold Effect Example Hide ❯

jQuery UI API - .position()

Category

Usage

Example

jQuery UI API - `.position()`