资源描述
理解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 style="background-color:#660066">一个占位而已~</div><div class="child4">我是child4哦~爸爸没有定位~可是爸爸的爸爸有绝对定位~</div></div>
</div>
<input type="button" value="点击试试" style="width:80px; height:25px;" id="test"/>
<br>
<div id="console" style="font-size:12px;"></div>
</body>
</html>
点击按钮之后会输出:
//说明不了什么
child1.position.top:1,child1.position.left: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
展开阅读全文
浙ICP备2021020529号-1 | 浙B2-20240490 
