jQuery中position()和offset()的区别是什么

jQuery中的position()和offset()是两个常见的获取元素位置的函数，它们的区别主要在于参照物的不同。

一、position()的用法和注意事项

position()方法用于获取匹配元素相对父元素的偏移量，是相对于直接父元素的位置。这个偏移量包括left、top、right、bottom等四个属性。

具体用法示例：

$(function(){
    var offset1 = $('#box1').position();
    console.log(offset1.left, offset1.top); //可以获取元素相对于父元素的左上角的位置
});

在使用position()函数时，需要注意一些事项：

1. 如果元素没有设置position属性，则position()函数无法获取元素的位置信息。

2. position()函数得到的位置是相对于第一个定位的祖先元素而言的。

二、offset()的用法和注意事项

offset()方法用于获取匹配元素的当前坐标位置，相对于文档顶部和左侧的位置。也就是说，offset()函数是依据文档的坐标为参照物的，包括left、top两个属性。

具体用法示例：

$(function(){
    var offset2 = $('#box2').offset();
    console.log(offset2.left, offset2.top); //可以获取元素相对于文档顶部和左侧的位置
});

使用offset()函数时，需要注意以下事项：

1. 如果元素还没有添加到文档中，offset()函数得到的是undefined。

2. 如果元素的祖先元素设置了position：relative 或 position：absolute，那么offset()函数将返回相对于文档顶部和左侧的距离加上这些position属性在该祖先元素中的偏移量。

示例1

HTML：

<div class="demo1_outer">
  <div class="demo1_inner"></div>
</div>

CSS：

.demo1_outer {
  position: absolute;
  top: 150px;
  left: 50%;
  margin-left: -150px;
  width: 300px;
  height: 300px;
  background-color: pink;
}

.demo1_inner {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: blue;
}

JS：

$(function() {
  var offset1 = $('.demo1_inner').position();
  console.log(offset1.left, offset1.top); // 0, 0

  var offset2 = $('.demo1_inner').offset();
  console.log(offset2.left, offset2.top); // 0, 150
});

这个例子中，外层元素设置了position: absolute，内层元素设置了position: relative。由于内层元素是外层元素的子级，因此内层元素的位置相对于外层元素是0，0，但考虑到外层元素本身的位置为top: 150px; left: 50%;，因此内层元素相对于文档的位置应该是top: 150px; left: 50%;，即该元素相对于文档顶部的距离是150px。

示例2

HTML：

<div class="demo2_outer">
  <div class="demo2_inner"></div>
</div>

CSS：

.demo2_outer {
  position: absolute;
  top: 150px;
  left: 50%;
  margin-left: -150px;
  width: 300px;
  height: 300px;
  background-color: pink;
}

.demo2_inner {
  width: 100px;
  height: 100px;
  background-color: blue;
}

JS：

$(function() {
  var offset1 = $('.demo2_inner').position();
  console.log(offset1.left, offset1.top); // 0, 0

  var offset2 = $('.demo2_inner').offset();
  console.log(offset2.left, offset2.top); // 50, 150
});

这个例子中，跟前面的例子一样，内层元素不再是直接定位的。由于内层元素没有设置position属性，因此position()方法无法获取该元素的位置信息，返回0，0。而offset()方法获取元素相对于文档的位置，因此返回50，150，即该元素在文档中相对于文档左上角的距离是left: 50%; top: 150px;。