Jquery 的offset与position方法
Jquery 的offset与position方法
offset():
获取匹配元素在当前视口的相对偏移。
返回的对象包含两个整形属性：top 和 left。此方法只对可见元素有效。
position()：
获取匹配元素相对父元素的偏移。
返回的对象包含两个整形属性：top 和 left。为精确计算结果，请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。
一个是相对视窗，一个是相对父窗口~~就是参照物不一样！
以下是html的例子（记得将js路径换成你的路径）:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script type="text/javascript" src="js/jquery-1.4.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:1px #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:300px;
width:200px;
height:200px;
background-color:#666666;
border:1px #333333 solid;
}
.child2{
width:100px;
height:100px;
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;
}
.child4{
width:100px;
height:100px;
background-color:#66FF66;
border:1px #999999 solid;
}
-->
</style>
<title>给abel818演示的例子</title>
<script type="text/javascript">
$(function(){
$("#test").click(function(){
var str ='';
var child1 = $(".child1").position();
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();
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.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.offset.top:'+child33.top+',child33.offset.left:'+child33.left+'<br>';
str += 'child44.offset.top:'+child44.top+',child44.offset.left:'+child44.left+'<br>';
$("#console").html(str);
});
});
</script>
</head>
<body>
<div class="parent1"><div class="child1">我是child1哦~爸爸没有定位~</div></div>
<div class="parent3"><div class="child3">我是child3哦~爸爸没有定位~</div></div>
<div class="parent2"><div class="child2">我是child2哦~爸爸有绝对定位~</div></div>
<div class="parent4">
<div class="parent41"><div >一个占位而已~</div><div class="child4">我是child4哦~爸爸没有定位~可是爸爸的爸爸有绝对定位~</div></div>
</div>
<input type="button" value="点击试试" >
//说明不了什么
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