Jquery .position和offset区别

迈不过友情╰ 2023-10-18 13:21 56阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70][]

说明：

**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()

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 1][]

offset()

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 2][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/201901021539153.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20190102154330162.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20190102154253700.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4,size_16,color_FFFFFF,t_70