Jquery中offset和position的区别分析
展开全部
position()获取相对于它最近的具有相对位置(position:relative或position:absolute)的父级元素的距离，如果找不到这样的元素，则返回相对于浏览器的距离。
offset()始终返回相对于浏览器文档的距离，它会忽略外层元素。
下边看个简单的例子，这里外层的div元素(position:relative)仅一个：
<div id="outer" style="width:200px;position:relative;left:100px;">
<div id="inner" style="position:absolute;left:50px;top:60px;">
</div>
</div>
//获取相对于最近的父级(position:relative或position:absolute)的位置
var vposition = $("#inner").position();
alert(vposition.left); //输出：50
alert(vposition.top); //输出：60
var voffset = $("#inner").offset();
alert(voffset.left); //输出：$("#outer").offset().left+50
alert(voffset.top); //输出：$("#outer").offset().top+60
在不同浏览器中,offset()得到的相对于浏览器的位置不同，相信你看了上边相应的注释，已经掌握了position()同offset()方法的区别。
offset()始终返回相对于浏览器文档的距离，它会忽略外层元素。
下边看个简单的例子，这里外层的div元素(position:relative)仅一个：
<div id="outer" style="width:200px;position:relative;left:100px;">
<div id="inner" style="position:absolute;left:50px;top:60px;">
</div>
</div>
//获取相对于最近的父级(position:relative或position:absolute)的位置
var vposition = $("#inner").position();
alert(vposition.left); //输出：50
alert(vposition.top); //输出：60
var voffset = $("#inner").offset();
alert(voffset.left); //输出：$("#outer").offset().left+50
alert(voffset.top); //输出：$("#outer").offset().top+60
在不同浏览器中,offset()得到的相对于浏览器的位置不同，相信你看了上边相应的注释，已经掌握了position()同offset()方法的区别。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
TableDI
2024-07-18 广告
VLOOKUP是Excel中用于垂直查找的函数，其基本用法包括四个参数：1. 查找值：即在数据表首列中需要搜索的值。2. 数据表：包含查找值的单元格区域或数组。3. 返回值所在列数：指定返回查询区域中第几列的值。4. 查找方式：选择精确匹配...
点击进入详情页
本回答由TableDI提供
2015-12-08 · 做真实的自己 用良心做教育
千锋教育
千锋教育专注HTML5大前端、JavaEE、Python、人工智能、UI＆UE、云计算、全栈软件测试、大数据、物联网+嵌入式、Unity游戏开发、网络安全、互联网营销、Go语言等培训教育。
向TA提问
关注
![]()
展开全部
一、Jquery中offset()
获取匹配元素在当前视口的相对偏移。 总是计算相对于文档的位置，无论元素的父元素或祖先元素的position属性是什么。
返回的对象包含两个整形属性：top 和 left。此方法只对可见元素有效。
例子：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
<style>
p { margin-left:10px; }
</style>
<script src="js/jquery.js"></script>
</head>
<body>
<p>Hello</p><p>2nd Paragraph</p>
<script>
var p = $("p:last");
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );
</script>
</body>
</html>
二、Jquery中position()
获取匹配元素相对父元素的偏移。 更通俗一点，含有position:relative的元素的最近的父元素或祖先元素---的位置。如果未能找到这样的父元素或祖先元素，那么会计算相对于文档（即视区左上角）的位置. 返回的对象包含两个整形属性：top 和 left。为精确计算结果，请在补白、边框和填充属性上使用像素单位。
<!DOCTYPE html>
<html>
<head>
<style>
div { padding: 15px;}
p { margin-left:10px; }
</style>
<script src="jquery脚本URL"></script>
</head>
<body>
<div>
<p>Hello</p>
</div>
<p></p>
<script>
var p = $("p:first");
var position = p.position();
$("p:last").text( "left: " + position.left + ", top: " + position.top );
</script>
</body>
</html>
获取匹配元素在当前视口的相对偏移。 总是计算相对于文档的位置，无论元素的父元素或祖先元素的position属性是什么。
返回的对象包含两个整形属性：top 和 left。此方法只对可见元素有效。
例子：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
<style>
p { margin-left:10px; }
</style>
<script src="js/jquery.js"></script>
</head>
<body>
<p>Hello</p><p>2nd Paragraph</p>
<script>
var p = $("p:last");
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );
</script>
</body>
</html>
二、Jquery中position()
获取匹配元素相对父元素的偏移。 更通俗一点，含有position:relative的元素的最近的父元素或祖先元素---的位置。如果未能找到这样的父元素或祖先元素，那么会计算相对于文档（即视区左上角）的位置. 返回的对象包含两个整形属性：top 和 left。为精确计算结果，请在补白、边框和填充属性上使用像素单位。
<!DOCTYPE html>
<html>
<head>
<style>
div { padding: 15px;}
p { margin-left:10px; }
</style>
<script src="jquery脚本URL"></script>
</head>
<body>
<div>
<p>Hello</p>
</div>
<p></p>
<script>
var p = $("p:first");
var position = p.position();
$("p:last").text( "left: " + position.left + ", top: " + position.top );
</script>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
