返回值:Objectoffset()

取得第一个匹配元素的相对于文档的坐标。

.offset() 方法允许我们取得某元素相对于文档的当前位置。与 .position() 不同，.position() 取得的位置是相对于父元素的。当通过全局操作（特别是通过拖拽操作）将一个新的元素放置到另一个已经存在的元素的上面时，若要取得这个新的元素的位置，那么使用 .offset() 更合适。

.offset() 返回一个对象，包含 top 和 left 属性。

注意: jQuery 无法取得隐藏元素的偏移坐标。同样的，也无法取得隐藏元素的 border, margin, 或 padding 信息。

若元素的属性设置的是 visibility:hidden，那么我们依然可以取得它的坐标。但是若设置的属性是 display:none，由于在绘制 DOM 树时根本就不绘制该元素，所以它的位置属性值是 undefined。

示例:

取得第二个段落的 offset：

<!DOCTYPE html>
<html>
<head>
<style>
p { margin-left:10px; }
  </style>
<script src="jquery.min.js"></script>
</head>
<body>

<p>Hello</p><p>2nd Paragraph</p>

<script>

var p = $("p:last");
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );

</script>
</body>
</html>

演示:

示例:

取得所点击元素的 offset。

<!DOCTYPE html>
<html>
<head>
<style>
p { margin-left:10px; color:blue; width:200px; 
    cursor:pointer; }
span { color:red; cursor:pointer; }
div.abs { width:50px; height:50px; position:absolute;
          left:220px; top:35px; background-color:green; 
          cursor:pointer; }
  </style>
<script src="jquery.min.js"></script>
</head>
<body>

<div id="result">Click an element.</div>
<p>
  This is the best way to <span>find</span> an offset.
</p>

<div class="abs">
</div>
  

<script>


$("*", document.body).click(function (e) {
  var offset = $(this).offset();
  e.stopPropagation();
  $("#result").text(this.tagName + " coords ( " + offset.left + ", " +
                                  offset.top + " )");
});



</script>
</body>
</html>

演示:

返回值:jQueryoffset(coordinates)

为每个匹配的元素设置相对于文档的坐标。

.offset() 方法允许我们为元素重新设置位置。元素的位置是相对于文档的。如果元素的 position 属性是 static，那么调用该方法后，该属性值会被设置成 relative。

示例:

设置第二个段落的位置：

<!DOCTYPE html>
<html>
<head>
<style>p { margin-left:10px; } </style>
<script src="jquery.min.js"></script>
</head>
<body>

<p>Hello</p><p>2nd Paragraph</p>

<script>

$("p:last").offset({ top: 10, left: 30 });

</script>
</body>
</html>

演示: