jQuery .position() Method

What Is .position()?

.position() returns the current coordinates of the first matched element as { top, left }, relative to the offset parent (since jQuery 1.2). It measures the element’s margin box against the parent’s padding box.

$("p").position()   // { top: Number, left: Number }

.position()  → relative to the offset parent
.offset()    → relative to the document

// No setter — use .css() or .offset() to move

How to Use .position()

Read local coordinates; move with CSS when you need a write.

1. Select a visible DOM element.
2. Call .position() to get { top, left } vs the offset parent.
3. Use those numbers for local layout math (tooltips, neighbors, nudges).
4. To move the element, set position in CSS and write top/left with .css().

Pseudocode

function position(selection):
    if selection is empty:
        return undefined

    el = first matched element
    parent = offsetParent(el)   // nearest positioned ancestor, or body
    return {
        top:  distance from parent's padding edge to el's margin edge
        left: distance from parent's padding edge to el's margin edge
    }

Cheat Sheet

Keep these facts handy while reading local position.

Live Preview

Pick an action and see what .position() returns inside a positioned wrapper.

$("#box").position()
→ { top: …, left: … }

jQuery Examples

Short, copy-ready snippets. Open DevTools Console, or use Try It Yourself for a live editor.

var position = $("p").first().position();

console.log("left: " + position.left + ", top: " + position.top);

left: 10, top: 15

(Exact numbers depend on your page layout.)

var $box = $("#box");
var p = $box.position();
var o = $box.offset();

console.log("position: left " + p.left + ", top " + p.top);
console.log("offset:   left " + o.left + ", top " + o.top);

position: left 0, top 0
offset:   left 50, top 100

(When #box sits at 0,0 inside a positioned wrapper.)

var $box = $("#box");
var p = $box.position();

$box.css({
  position: "relative",
  top: p.top + 20,
  left: p.left + 10
});

var next = $box.position();
console.log("left: " + next.left + ", top: " + next.top);

left: 10, top: 20

(After nudging from 0,0.)

var p = $("#box").position();
console.log("inside wrap → left " + p.left + ", top " + p.top);

console.log("offsetParent tag → " + $("#box").offsetParent()[0].tagName);

inside wrap → left 0, top 0
offsetParent tag → DIV

Performance Notes

Coordinate getters force layout. Read once, reuse the object, and avoid calling .position() inside tight animation frames unless needed.

Key Takeaways