jQuery API

.position()

Categories: CSS | Offset | Manipulation > Style Properties

.position() Returns: Object

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

  • version added: 1.2.position()

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.

Example:

Access the position of the second paragraph:

<!DOCTYPE html>
<html>
<head>
  <style>

  div { padding: 15px;}
  p { margin-left:10px; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
	<div><p>Hello</p></div><p></p>
<script>var p = $("p:first");
var position = p.position();
$("p:last").text( "left: " + position.left + ", top: " + position.top );</script>
</body>
</html>

Demo:

Comments

  • Support requests, bug reports, and off-topic comments will be deleted without warning.

  • Please do post corrections or additional examples for .position() below. We aim to quickly move corrections into the documentation.
  • If you need help, post at the forums or in the #jquery IRC channel.
  • Report bugs on the bug tracker or the jQuery Forum.
  • Discussions about the API specifically should be addressed in the Developing jQuery Core forum.
  • gxlrygt
    i have the same .position().left problem. when i alert the value, it returns 0 with on chrome. with other browsers it return actual number. does anybody have an idea why this happens?
  • aurelio
    Use css.offset().left. It works fine (teste with Chrome & safari).

    The solution of Mr Cooljay
    var leftPos = parseFloat($(this).css('left'));
    don't works for element not with absolure positioning, returning 'auto' as value failing the parseFloat.

    regards
  • Mr. CoolJay
    I ran into this problem, but an easy fix is

    var leftPos = parseFloat($(this).css('left'));

    and you can do the same thing for what ever else too.
  • You're much more likely to find an answer to your question on the jQuery Forum.
  • what about "right"?
    it's needed on Right to Left pages, like hebrew pages.
  • Alejo
    I have a problem with .position() in Google Chrome.

    It may sound weird, but when browsing with Google Chrome, .position().left doesn't returns the actual X position of an element. I have a DIV:

    #imgCont
    {
    margin: auto;
    width: 50%;
    height: 300px;
    background-color: #408080;
    }

    When browsing with Firefox or IE, .position().left returns ~= 260, but Google Chrome returns 8! The curious thing is that .position().top works great. Any ideas?

    (excuse my poor english)
  • Please report bugs to the appropriate jQuery forum
  • Angelo D'Ambrosio
    It's not possible also to set the position with the same method?
  • You can just use .css({left: 'someNumber', top: 'someNumber'});