jQuery UI API - .position()

Category

Method Overrides | Methods | Utilities

Usage

Description:Position an element relative to another element.

Returns:jQuery

Added in version:1.8

.position( options )

Parameters Type Description
options Object
  • my(Default:"center"）
    Type: String
    Description: Defineson the positioned elementthe position to align with the target element: "horizontal vertical" alignment. A single value, such as "right", will be normalized to "right center", and "top" will be normalized to "center top" (CSS conventions below). Acceptable horizontal values: "left", "center", "right". Acceptable vertical values: "top", "center", "bottom". For example, "left top" or "center center". Each dimension can also contain offsets, in pixels or percentages, such as "right+10 top-25%". Percentage offsets are relative to the positioned element.
  • at(Default:"center"）
    Type: String
    Description: Defineson the target elementthe position to align the positioned element against: "horizontal vertical" alignment. For more details, please see the possible values on the my option. Percentage offsets are relative to the target element.
  • of(Default:null）
    Type: Selector or Element or jQuery or Event
    Description: The element to position. 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, such as "#top-menu".
  • collision(Default:"flip"）
    Type: String
    Description: When the positioned element overflows the window in some direction, move it to an alternative position. 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".
    • "flip": Flip the element to the opposite side of the target, and run the collision detection again to see if the element fits. Whichever side allows more of the element to be visible will be used.
    • "fit": Move the element away from the edge of the window.
    • "flipfit": First apply the flip logic, placing the element on the side that allows more of the element to be visible. Then apply the fit logic, ensuring as much of the element as possible is visible.
    • "none": Do not apply any collision detection.
  • using(Default:null）
    Type: Function()
    Description: When this option is specified, the actual property setting is delegated to this callback. It accepts two arguments: the first is a hash of the top and left position values, which can be forwarded to .css() or .animate(); the second provides feedback about the position and dimensions of both elements, and also calculates their relative positions. Both target and element have the following properties: element, left, top, width, height. In addition, there are horizontal, vertical, and important, providing twelve possible directions, such as { horizontal: "center", vertical: "left", important: "horizontal" }.
  • within(Default:window）
    Type: Selector or Element or jQuery
    Description: The element to position within, which affects collision detection. If you provide a Selector or jQuery object, the first matching element will be used.

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

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 will not fail directly, because the method exists in jQuery. However, the expected behavior will not occur.

Examples

A simple jQuery UI Position example.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>.position() 实例</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>

Other Extensions