Jquery中的offset()和position()的区别
Jquery中的offset()和position()的区别一、Jquery中offset()
获取匹配元素在当前视口的相对偏移。 总是计算相对于文档的位置，无论元素的父元素或祖先元素的position属性是什么。
返回的对象包含两个整形属性：top 和 left。此方法只对可见元素有效。
例如
<!DOCTYPE html>
<html>
<head>
<style>
p { margin-left:10px; }
</style>
<script src="jquery脚本URL"></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>
p
二、Jquery中position()
获取匹配元素相对父元素的偏移。 更通俗一点，含有position:relative的元素的最近的父元素或祖先元素---的位置。如果未能找到这样的父元素或祖先元素，那么会计算相对于文档（即视区左上角）的位置. 返回的对象包含两个整形属性：top 和 left。为精确计算结果，请在补白、边框和填充属性上使用像素单位。
例如
<!DOCTYPE html>
<html>
<head>
<style>
li { padding: 15px;}
p { margin-left:10px; }
</style>
<script src="jquery脚本URL"></script>
</head>
<body>
<li>
<p>Hello</p>
</li>
<p></p>
<script>
var p = $("p:first");
var position = p.position();
$("p:last").text( "left: " + position.left + ", top: " + position.top );
</script>
</body>
</html>
三、offset()和position()的区别
1、offset()方法获取匹配元素在当前窗口的相对偏移量。这里的窗口指的是当前页面的窗口，不包括浏览器的菜单栏等，当然我们也不太需要使用jquery来控制整个浏览器，我们所要控制的是页面窗口。
2、position()方法获取匹配元素相对父元素的偏移量。即获取的是该元素相对于最近的一个拥有绝对定位或者相对定位的父元素的偏移量。如果所有的父元素都是默认的static定位方式，则其处理方式和offset()一样，是当前窗口的偏移量。
3、使用position()方法时如果其所有的父元素都为默认定位（static）方式，则其处理方式和offset()一样，是当前窗口的相对偏移
4、使用offset()方法不管该元素如何定位，也不管其父元素如何定位，都是获取的该元素相对于当前视口的偏移。