Jquery .position和offset区别

最新推荐文章于 2023-06-17 13:46:15 发布

凌冰_

最新推荐文章于 2023-06-17 13:46:15 发布

阅读量607

点赞数

分类专栏： JQuery

本文链接：https://blog.csdn.net/hlx20080808/article/details/85619420

版权

JQuery 专栏收录该内容

35 篇文章 1 订阅

订阅专栏

说明：

position()获取相对于它最近的具有相对位置(position:relative)的父级元素的距离，
如果找不到这样的元素，则返回相对于浏览器的距离。

offset()始终返回相对于浏览器文档的距离，它会忽略外层元素

1》jQuery中offset()方法:获取或设置指定元素在视窗或文章的偏移位置;

语法：$(selector).offset(value)

注：它的value为两个值一个为left一个为top

2》jQuery中position()方法可以取得元素相对于父元素的偏移位置。

语法：$(selector).position(value)

注：它的value为两个值一个为left一个为top

案例：

<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#outer {
				width: 200px;
				position: relative;  /*相对位置*/
				left: 200px;
				background: bisque;
				height: 200px;
			}
			
			#inner {
				width: 100%;
				height: 50px;
				position: absolute;  /*绝对位置*/
				left: 50px;
				top: 60px;
				background: chocolate;
			}
		</style>

	</head>

	<body>
		<div id="outer">
			
			<div id="inner">
			</div>
		</div>
	</body>

</html>
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
	$(function(){
		
		//获取相对于最近的父级(position:relative)的位置
		var vpos = $("#inner").position();
		alert(vpos.left+"\n"+vpos.top);
		
		//返回相对于浏览器文档的距离
		var voff = $("#inner").offset();
		alert(voff.left+"\n"+voff.top);
		
	})
</script>

效果：

position()