jquery offset() position() 区别
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><script type="text/javascript" src="jquery.js"></script><style type="text/css"><!--body {margin-left: 0px;margin-top: 0px;margin-right: 0px;margin-bottom: 0px;}.parent1{width:200px;height:200px;background-color:#666666;border:5px #333333 solid;}.child1{width:100px;height:100px;background-color:#66FF66;border:1px #999999 solid;}.parent3{width:200px;height:200px;background-color:#666666;border:1px #333333 solid;}.child3{width:100px;height:100px;background-color:#66FF66;border:1px #999999 solid;}.parent2{position:absolute;top:200px;left:250px;width:200px;height:200px;background-color:#666666;border:1px #333333 solid;}.child2{width:100px;height:100px;background-color:#66FF66;border:5px #999999 solid;}.parent4{position:absolute;top:200px;left:500px;width:200px;height:200px;background-color:#666666;border:1px #333333 solid;}.parent41{width:150px;height:150px;background-color:#0033CC;border:3px #111111 solid;}.child4{width:100px;height:100px;background-color:#66FF66;border:1px #999999 solid;}--></style> <script type="text/javascript"> $(function(){ $("#test").click(function(){var str ='';var child1_position = $(".child1").position();var child2_position = $(".child2").position();var child3_position = $(".child3").position();var child4_position = $(".child4").position();var child1_offset = $(".child1").offset();var child2_offset = $(".child2").offset();var child3_offset = $(".child3").offset();var child4_offset = $(".child4").offset();str += 'child1.position.top:'+child1_position.top+',child1.position.left:'+child1_position.left+'<br>';str += 'child2.position.top:'+child2_position.top+',child2.position.left:'+child2_position.left+'<br>';str += 'child3.position.top:'+child3_position.top+',child3.position.left:'+child3_position.left+'<br>';str += 'child4.position.top:'+child4_position.top+',child4.position.left:'+child4_position.left+'<br>';str += '<hr>';str += 'child1.offset.top:'+child1_offset.top+',child1.offset.left:'+child1_offset.left+'<br>';str += 'child2.offset.top:'+child2_offset.top+',child2.offset.left:'+child2_offset.left+'<br>';str += 'parent2.offset.top:'+$('.parent2').offset().top+',parent2.offset.left:'+$('.parent2').offset().left+'<br>';str += 'child3.offset.top:'+child3_offset.top+',child3.offset.left:'+child3_offset.left+'<br>';str += 'child4.offset.top:'+child4_offset.top+',child4.offset.left:'+child4_offset.left+'<br>';$("#console").html(str);}); }); </script></head><body><div value="点击试试" style="width:80px; height:25px;" id="test"/><br><div id="console" style="font-size:17px;"></div></body></html>
?
运行结果：
?
几点说明：
1、offset():
获取匹配元素在当前视口（document）的相对偏移。
返回的对象包含两个整形属性：top 和 left。此方法只对可见元素有效。
2、position():
获取匹配元素相对父元素的偏移。
返回的对象包含两个整形属性：top 和 left。为精确计算结果，请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。
3、一个是相对视窗，一个是相对父窗口~~就是参照物不一样！
4、使用position()方法时，事实上是把该元素当绝对定位来处理，获取的是该元素相当于最近的一个拥有绝对或者相对定位的父元素的偏移位置
5、使用position()方法时如果其所有的父元素都为默认定位（static）方式，则其处理方式和offset()一样，是当前窗口的相对偏移
6、使用offset()方法不管该元素如何定位，也不管其父元素如何定位，都是获取的该元素相对于当前视口的偏移