理解Jquery-的offset与position方法.doc

理解Jquery 的offset与position方法

offset():
获取匹配元素在当前视口的相对偏移。
返回的对象包含两个整形属性：top 和 left。此方法只对可见元素有效。
position()：
获取匹配元素相对父元素的偏移。
返回的对象包含两个整形属性：top 和 left。为精确计算结果，请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。
一个是相对视窗，一个是相对父窗口~~就是参照物不一样！
以下是html的例子（记得将js路径换成你的路径）:

1 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-ri</p><p style='padding:5px 0px;'>3、ght: 0px;
margin-bottom: 0px;
}
.parent1{
width:200px;
height:200px;
background-color:#666666;
border:1px #333333 solid;
}
.child1{
width:100px;
height:100px;
background-color:#66FF66;
border:1px #999999 solid;
}
.parent3{
width:200px;
height:200px;
background-color:#666666;
bord</p><p style='padding:5px 0px;'>4、er:1px #333333 solid;
}
.child3{
width:100px;
height:100px;
background-color:#66FF66;
border:1px #999999 solid;
}
.parent2{
position:absolute;
top:200px;
left:300px;
width:200px;
height:200px;
background-color:#666666;
border:1px #333333 solid;
}
.child2{
width:100px;
height:100px</p><p style='padding:5px 0px;'>5、
background-color:#66FF66;
border:1px #999999 solid;
}
.parent4{
position:absolute;
top:200px;
left:550px;
width:200px;
height:200px;
background-color:#666666;
border:1px #333333 solid;
}
.parent41{
width:150px;
height:150px;
background-color:#0033CC;
border:1px #111111 solid;
}
</p><p style='padding:5px 0px;'>6、child4{
width:100px;
height:100px;
background-color:#66FF66;
border:1px #999999 solid;
}
-->

给abel818演示的例子

$(function(){
$("#test").click(function(){
var str ='';

var child1 = $(".child1").position();
</p><p style='height:0px;padding:0;overflow:hidden'>7、
var child2 = $(".child2").position();
var child3 = $(".child3").position();
var child4 = $(".child4").position();
var child11 = $(".child1").offset();
var child22 = $(".child2").offset();
var child33 = $(".child3").offset();
var child44 = $(".child4").offset</p><p style='height:0px;padding:0;overflow:hidden'>8、);
str += 'child1.position.top:'+child1.top+',child1.position.left:'+child1.left+'<br>';
str += 'child2.position.top:'+child2.top+',child2.position.left:'+child2.left+'<br>';
str += 'child3.position.top:'+child3.top+',child3.position.left:'+child3.left+'<br>';
str += 'child4</p><p style='height:0px;padding:0;overflow:hidden'>9、position.top:'+child4.top+',child4.position.left:'+child4.left+'<br>';
str += '<hr>';
str += 'child11.offset.top:'+child11.top+',child11.offset.left:'+child11.left+'<br>';
str += 'child22.offset.top:'+child22.top+',child22.offset.left:'+child22.left+'<br>';
str += 'child33.o</p><p style='height:0px;padding:0;overflow:hidden'>10、ffset.top:'+child33.top+',child33.offset.left:'+child33.left+'<br>';
str += 'child44.offset.top:'+child44.top+',child44.offset.left:'+child44.left+'<br>';

$("#console").html(str);

});

});

>1

//由于parent进行了定位,说明父元素有定位了,子元素的position是相对父元素的
child2.position.top:0,child2.position.left:0

//由于parent没有定位,说明子元素的position是相对document的(这就是你说的情况吧)
child3.position.top:203,child3.position.left:1

//由于parent没有定位,而父元素的父元素进行了定位,说明子元素的position是相对离它最近进行了定位的父元素
child4.position.top:19,child4.position.left:1

//说明不了什么
child11.offset.top:1,child11.offset.left:1
//以下说明元素的offset都是相对document的
child22.offset.top:201,child22.offset.left:301
child33.offset.top:203,child33.offset.left:1
child44.offset.top:220,child44.offset.left:552