.offset()?.offset() gets or sets an element’s document-relative coordinates as { top, left } (getter since 1.2; setter since 1.4). It measures the border box — margins are excluded.
$("p").offset() // { top: Number, left: Number }
$("p").offset({ top: 10, left: 30 })
$("p").offset(function (i, coords) { ... })
.offset() → relative to the document
.position() → relative to the offset parent| Need | Use |
|---|---|
| Page / document coords | $el.offset() |
| Coords inside a positioned parent | $el.position() |
| Scroll position | .scrollTop() / .scrollLeft() |
.offset()Read or write document coordinates with a plain { top, left } object.
.offset() with no args to read { top, left }.{ top, left } to move the element in the document (jQuery 1.4+).| Piece | Required? | Role |
|---|---|---|
| jQuery selection | Yes | Element(s) to measure or move |
coordinates / function | Setter only (1.4+) | New { top, left } (or per-element fn) |
| Return | — | Getter → object; setter → jQuery (chainable) |
function offset(selection, value):
if value is missing:
el = first matched element
return { top, left } relative to document
for each el in selection:
if value is a function:
coords = value(index, currentOffset)
else:
coords = value
if el.position is static:
set position to relative
move el so border-box = coords
return selectionKeep these facts handy while reading document position.
| Topic | Detail |
|---|---|
| Syntax | .offset() / .offset({ top, left }) / .offset(fn) |
| Since | Getter 1.2; setter & callback 1.4 |
| Getter returns | { top: Number, left: Number } |
| Relative to | Document (not the offset parent) |
| Box | Border box (margins excluded) |
vs .position() | Document vs offset parent |
| Static elements | Setter promotes them to relative |
Pick an action and see what .offset() returns or sets on the sample box.
Short, copy-ready snippets. Open DevTools Console, or use Try It Yourself for a live editor.
Official style: read { top, left } for an element.
var offset = $("p").last().offset();
console.log("left: " + offset.left + ", top: " + offset.top);$("p").last()..offset() returns a plain object with top and left.Pass { top, left } to move an element (since 1.4).
$("p").last().offset({ top: 10, left: 30 });
var o = $("p").last().offset();
console.log("left: " + o.left + ", top: " + o.top);top and left.static, jQuery switches it to relative..offset() again to confirm the move..offset() vs .position()Same element, two coordinate systems.
var $box = $("#box");
var o = $box.offset();
var p = $box.position();
console.log("offset: left " + o.left + ", top " + o.top);
console.log("position: left " + p.left + ", top " + p.top);.offset() measures from the page origin..position() measures from the offset parent.Nudge each box from its current document coordinates.
$(".box").offset(function (index, coords) {
return {
top: coords.top + 10,
left: coords.left + index * 20
};
});
$(".box").each(function (i) {
var o = $(this).offset();
console.log("box " + i + ": left " + o.left + ", top " + o.top);
});{ top, left }.Check these before trusting .offset() in layout code.
display:none is unreliableHidden elements are not laid out. Show them (or clone off-screen) before measuring.
.position()Document coords vs offset-parent coords. Mixing them breaks overlays and drag logic.
positionStatic elements become relative when you set .offset(). Set position yourself if that matters.
Sub-pixel layouts can return numbers like 72.5. Round only when your UI needs integers.
.offset() getter has shipped since jQuery 1.2; the setter and callback forms arrived in jQuery 1.4. Works in all modern browsers with jQuery loaded.
Document-relative coordinates API — getter returns { top, left }; setter accepts an object or function (1.4+).
Bottom line: Use .offset() for document coordinates. Switch to .position() when you need the offset parent instead.
| Approach | Cost | Best for |
|---|---|---|
.offset() | Layout read | Document coordinates |
.position() | Layout read | Offset-parent coordinates |
| Repeated reads in a loop | Can thrash layout | Cache { top, left } first |
Coordinate getters force layout. Read once, reuse the object, and avoid calling .offset() inside tight animation frames unless needed.
{ top, left }.static to relative.One line: .offset() gives document { top, left } — use it for page-level placement, and switch to .position() inside a positioned parent.
Learn coordinates relative to the offset parent.
9 people found this page helpful