jQuery中有两个获取元素位置的方法offset()和position(),两者的定义如下:
 
offset():
获取匹配元素在当前视口的相对偏移。
返回的对象包含两个整形属性:top 和 left。此方法只对可见元素有效。
 
第二种用法:offset( coordinates )
让我们重新设置元素的位置这个元素的位置是相对于document对象的。
如果对象原先的position样式属性是static的话,会被改成relative来实现重定位。
$("#xx").offset({top:200,left:200});

position():
获取匹配元素相对父元素的偏移。
返回的对象包含两个整形属性:top 和 left。为精确计算结果,
请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。


offset()和position()的区别:
1 使用position()方法时事实上是把该元素当绝对定位来处理,获取的是该元素相当于最近的一个拥有绝对或者相对定位的父元素的偏移位置。
2 使用position()方法时如果其所有的父元素都为默认定位(static)方式,则其处理方式和offset()一样,是当前窗口的相对偏移
3  使用offset()方法不管该元素如何定位,也不管其父元素如何定位,都是获取的该元素相对于当前视口的偏移。
    
一般情况下,如果要显示的元素B存放在元素A的同一父元素下(即B为A的兄弟节点),这个时候使用position() 是最合适的;
 
如果显示的元素B存放在DOM的最顶端或者最底端(即其父元素就是body)。这个时候用offset()是最好的。
 
 
【出处】http://yoyoyuan.blog.51cto.com/3313685/645190

.offset()与.position()区别的更多相关文章

  1. jQuery获得元素位置offset()和position()的区别

    jQuery获得元素位置offset()和position()的区别 jQuery 中有两个获取元素位置的方法offset()和position(),这两个方法之间有什么异同 offset(): 获取 ...

  2. offset()与position()的区别

    jQuery中有两个获取元素位置的方法offset()和position(),两者的定义如下: offset(): 获取匹配元素在当前视口的相对偏移. 返回的对象包含两个整形属性:top 和 left ...

  3. jquery offset() 与position()方法的区别

    jquery 中有两个获取元素位置的方法offset()和position(),这两个方法之间有什么异同?使用的时候应该注意哪些问题?什么时候使用offset(),什么时候又使用position()呢 ...

  4. 区分jquery中的offset和position

    一次又一次地碰到需要获取元素位置的问题, 然后一次又一次地查offset和position的区别. 忍不了了, 这次一定得想办法记下来. position是元素相对于父元素的位置. 这个好记, par ...

  5. Jquery中的offset()和position()深入剖析

    jquery 中有两个获取元素位置的方法offset()和position(),这两个方法之间有什么异同?使用的时候应该注意哪些问题?什么时候使用offset(),什么时候又使用position()呢 ...

  6. 关于jQuery中的 offset() 和 position() 的用法

    ---恢复内容开始--- 在jQuery中有两个获取元素位置的方法offset()和position().position()方法是在1.2.6版本之后加入的,为什么要引入这个方法呢?这两个方法之间有 ...

  7. 关于jQuery中的offset()和position()

    在jQuery中有两个获取元素位置的方法offset()和position().position()方法是在1.2.6版本之后加入的,为什么要引 入这个方法呢?这两个方法之间有什么异同?使用的时候应该 ...

  8. Jquery中的offset()和position()深入剖析(元素定位)

    先看看这两个方法的定义. offset(): 获取匹配元素在当前视口的相对偏移. 返回的对象包含两个整形属性:top 和 left.此方法只对可见元素有效. position(): 获取匹配元素相对父 ...

  9. jquery offset()和position()的区别

    <script src="jquery/jquery-3.3.1.min.js"></script> <script type="text/ ...

随机推荐

  1. 获取设备的UUID

    很多时候需要获取设备的UUID,比如在蓝牙交互时,需要获取服务和特征的UUID,那么如何获取设备的UUID呢?请见如下代码: // // ViewController.m // 获取UUID // / ...

  2. AngularJS路由和模板

    前言 如果想开发一款类似gmail的web应用,我们怎么做呢? 以jQuery的思路,做响应式的架构设计时,我们要监听所有点击事件,通过事件函数触发我们加载数据,提交,弹框,验证等的功能:以 Angu ...

  3. php 数组 array_values () array_key()

    <?php // array_unique($array) 去除重复 // array_unshif()向数组的顶部追加函数 // array_shif($a,"ss")向数 ...

  4. Mvc中使用MvcSiteMapProvider实现站点地图之基础篇

    MvcSiteMapProvider 是针对 ASP.NET MVC 中,提供菜单. 网站地图. 站点地图路径功能,以及更多的工具.它提供配置使用一个可插入的体系结构,可以是 XML. 数据库或动态生 ...

  5. QT Creator 2.7.2 代码自动补全快捷键设置

    在QT Creater界面点[工具]再进[选项]找到[环境]下的[键盘]选项,搜索[CompleteThis]发现默认快捷键就是CTRL+SPACE,把它删除,然后添加自己想设置的快捷键(因为之前用e ...

  6. Android下EditText中的字体不统一问题

    Android下EditText中的字体不统一问题 好久没写,今天心情好略记下解决的某bug 在一个登录界面有帐号和密码两个EditText,但是却发现两个EditText的hint的英文字体不同,看 ...

  7. 一次rman恢复的实验

    本文主要针对备份和恢复数据文件,具体rman知识点查阅我的另一篇文章:http://blog.csdn.net/perfect_db/article/details/8765022 首先看看数据文件的 ...

  8. Hbase深入学习(一) 什么是hbase

    Hbase深入学习(一) 什么是hbase 一.hbase是什么?      首先hbase是一个在Hadoop的HDFS分布式存储系统上介于映射(key/value)的nosql的分布式数据库:它通 ...

  9. 常用的wsdl地址

    天气预报Web Service,数据来源于中国气象局 Endpoint Disco WSDL IP地址来源搜索Web Service(是目前最完整的IP地址数据) Endpoint Disco WSD ...

  10. thinkphp中的where()方法

    where方法的用法是ThinkPHP查询语言的精髓,也是ThinkPHP ORM的重要组成部分和亮点所在,可以完成包括普通查询.表达式查询.快捷查询.区间查询.组合查询在内的查询操作.where方法 ...