jQuery的position()方法是用于获取匹配元素相对于其最近定位的祖先元素的当前坐标的方法，返回的是一个包含top和left两个属性的对象，这两个属性分别代表元素上边距和左边距相对于参考元素的偏移量。这个方法在处理元素布局、动态计算元素位置、实现拖拽交互等场景中都有广泛的应用。
position()方法的基本用法
position()方法不需要传入任何参数，调用后会直接返回一个包含top和left数值的对象，数值的单位是像素，并且不包含单位。我们可以通过这两个属性获取元素的具体偏移量。
下面是一个基础的使用示例，页面结构如下：
<div class="parent">
<div class="child">测试元素</div>
</div>
对应的CSS样式为：
.parent {
position: relative;
width: 500px;
height: 300px;
margin: 50px;
border: 1px solid #ccc;
}
.child {
position: absolute;
top: 80px;
left: 120px;
width: 100px;
height: 50px;
background: #f0f0f0;
}
使用jQuery获取子元素的位置信息：
$(function() {
var pos = $('.child').position();
console.log('top偏移量：' + pos.top);
console.log('left偏移量：' + pos.left);
});
这段代码执行后，控制台会输出top偏移量为80，left偏移量为120，和我们在CSS中设置的绝对定位偏移量一致。
position()方法的参考基准
position()方法的位置参考对象是元素最近的、设置了定位（position属性为relative、absolute、fixed或sticky）的祖先元素。如果元素的所有祖先元素都没有设置定位，那么参考对象会默认是文档的根元素，也就是<html>标签。
我们可以通过下面的例子验证这个规则：
<div class="grandparent">
<div class="parent">
<div class="child">参考测试</div>
</div>
</div>
.grandparent {
position: relative;
width: 600px;
height: 400px;
margin: 30px;
border: 1px solid #999;
}
.parent {
/* 没有设置定位 */
width: 400px;
height: 300px;
margin: 50px;
border: 1px solid #666;
}
.child {
position: absolute;
top: 60px;
left: 90px;
width: 120px;
height: 60px;
background: #e8e8e8;
}
此时调用position()方法，子元素的参考对象就是设置了relative定位的grandparent元素，返回的top和left是相对于grandparent元素内边距区域的坐标。
position()和offset()的区别
很多开发者容易混淆position()和offset()方法，两者的核心区别如下：
| 对比项 | position() | offset() |
|---|---|---|
| 参考对象 | 最近的定位祖先元素 | 文档的根元素（<html>） |
| 返回值是否包含滚动偏移 | 不包含 | 不包含 |
| 是否可设置值 | 仅获取，不能设置 | 可以传入对象设置元素位置 |
如果我们需要获取元素相对于页面顶部的绝对位置，就应该使用offset()方法；如果需要获取元素相对于其定位父元素的位置，就使用position()方法。
实际应用场景示例
场景一：动态计算提示框位置
当我们需要给某个元素添加一个跟随的提示框时，可以通过position()方法获取目标元素的位置，再设置提示框的偏移量。
$(function() {
$('.target-element').hover(function() {
var targetPos = $(this).position();
var targetWidth = $(this).outerWidth();
// 提示框放在目标元素右侧
$('.tooltip').css({
top: targetPos.top,
left: targetPos.left + targetWidth + 10
}).show();
}, function() {
$('.tooltip').hide();
});
});
场景二：拖拽元素边界限制
在实现元素拖拽功能时，如果需要限制元素只能在其定位父元素内部拖动，就可以通过position()获取元素当前的位置，再判断拖动后的位置是否超出父元素的边界。
var dragElement = $('.drag-box');
var parentElement = dragElement.parent();
var maxLeft = parentElement.width() - dragElement.outerWidth();
var maxTop = parentElement.height() - dragElement.outerHeight();
dragElement.on('mousedown', function(e) {
var startX = e.pageX;
var startY = e.pageY;
var startPos = dragElement.position();
$(document).on('mousemove', function(e) {
var offsetX = e.pageX - startX;
var offsetY = e.pageY - startY;
var newLeft = startPos.left + offsetX;
var newTop = startPos.top + offsetY;
// 限制边界
newLeft = Math.max(0, Math.min(newLeft, maxLeft));
newTop = Math.max(0, Math.min(newTop, maxTop));
dragElement.css({
left: newLeft,
top: newTop
});
});
$(document).on('mouseup', function() {
$(document).off('mousemove').off('mouseup');
});
});
注意事项
- position()方法只对可见元素有效，如果元素是隐藏的（display:none），返回的top和left都会是0。
- 返回的坐标值是数值类型，不需要额外做类型转换就可以直接参与计算。
- 如果元素的position属性是fixed，那么position()的参考对象仍然是最近的定位祖先，而不是视口，这一点和offset()的行为不同。
通过上面的讲解，相信你已经了解了jQuery中position()方法的作用、用法以及和offset()的区别，在实际开发中可以根据需求选择合适的方法获取元素位置信息。
jQueryposition()DOM定位offset元素坐标修改时间：2026-06-21 18:57:34