Categories

.position()

Categories: Style Properties | CSS | UI | Offset

.position()Returns: Object

Description: Get the current coordinates of the first element in the set of matched elements, relative to the offset parent.

  • .position()

    version added: 1.0

The .position() method allows us to retrieve the current position of an element relative to the offset parent. Contrast this with .offset(), which retrieves the current position relative to the document. When positioning a new element near another one and within the same containing DOM element, .position() is the more useful.

Returns an object containing the properties top and left.

Note that jQuery does not support getting the position coordinates of hidden elements.

  • Access the position of the second paragraph:

    HTML:
    
    <div>
      <p>Hello</p>
    </div>
    <p></p>
    
    CSS:
    
    
      div { padding: 15px;}
      p { margin-left:10px; }
      
    Code:
    
    var p = $("p:first");
    var position = p.position();
    $("p:last").text( "left: " + position.left + ", top: " + position.top );
    

.position( [ options ] )

Plugin: jQuery.ui.position

Description: Apply the Position widget for each element in the set of matched elements

  • .position( [ options ] )

    version added: 1.0

    options   A map of additional options pass to the widget.

Utility script for positioning any widget relative to the window, document, a particular element, or the cursor/mouse.

Note: jQuery UI does not support positioning hidden elements.

Does not need ui.core.js or effects.core.js.

  • my

    Defines which position on the element being positioned to align with the target element: "horizontal vertical" alignment. A single value such as "right" will default to "right center", "top" will default to "center top" (following CSS convention). Acceptable values: "top", "center", "bottom", "left", "right". Example: "left top" or "center center"

    Default: "center"

  • at

    Defines which position on the target element to align the positioned element against: "horizontal vertical" alignment. A single value such as "right" will default to "right center", "top" will default to "center top" (following CSS convention). Acceptable values: "top", "center", "bottom", "left", "right". Example: "left top" or "center center"

    Default: "center"

  • of

    Element to position against. If you provide a selector, the first matching element will be used. If you provide a jQuery object, the first element will be used. If you provide an event object, the pageX and pageY properties will be used. Example: "#top-menu"

    Default: null

  • offset

    Add these left-top values to the calculated position, eg. "50 50" (left top) A single value such as "50" will apply to both.

    Default: null

  • collision

    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, eg. "flip", "fit", "fit flip", "fit none".

    Default: "flip"

  • using

    When specified the actual property setting is delegated to this callback. Receives a single parameter which is a hash of top and left values for the position that should be set.

    Default: null