jQuery position()方法
分类：实例代码
此方法可以返回匹配元素相对于指定元素的偏移量。
它会返回一个对象，对象具有top和left属性，分别表示纵向和横向偏移量。
偏移量分两种情况，一种是父级元素具有定位元素，另一种父级元素没有定位元素。
代码实例:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
*{
margin:0;
padding:0;
}
#box{
width:300px;
height:200px;
background:#ccc;
margin:100px;
overflow:hidden;
}
#middle{
width:200px;
height:150px;
background:green;
margin:20px;
overflow:hidden;
}
#inner{
width:120px;
height:80px;
background:black;
margin:20px;
color:white
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(document).ready(function(){
var str="";
str=str+$("#inner").position().left+"<br/>"
str=str+$("#inner").position().top;
$("#inner").html(str);
});
</script>
</head>
<body>
<div id="box">
<div id="middle">
<div id="inner"></div>
</div>
</div>
</body>
</html>
inner元素的父级元素中没有定位元素，那么偏移量是相对于文档的。
特别说明:偏移量值是从inner元素的外边距边缘开始计算的。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
*{
margin:0;
padding:0;
}
#box{
width:300px;
height:200px;
background:#ccc;
margin:100px;
overflow:hidden;
}
#middle{
width:200px;
height:150px;
background:green;
margin:20px;
overflow:hidden;
position:relative;
}
#inner{
width:120px;
height:80px;
background:black;
margin:20px;
position:relative;
left:10px;
top:20px;
color:white;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(document).ready(function(){
var str="";
str=str+$("#inner").position().left+"<br/>"
str=str+$("#inner").position().top;
$("#inner").html(str);
});
</script>
</head>
<body>
<div id="box">
<div id="middle">
<div id="inner"></div>
</div>
</div>
</body>
</html>
inner元素的具有定位的父级元素，那么偏移量就以此父级元素作为参考。
jQuery position()方法，这样的场景在实际项目中还是用的比较多的，关于jQuery position()方法就介绍到这了。
jQuery position()方法属于前端实例代码，有关更多实例代码大家可以查看。