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()是最好的

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

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

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

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

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

  3. js和jq中常见的各种位置距离之offset()和position()的区别(二)

    offset()返回的是相对于当前文档的坐标,position()返回的是相对于其定位的祖辈元素的坐标. 使用position()方法时事实上是把该元素当绝对定位来处理,获取的是该元素相当于最近的一个 ...

  4. jquery的offset与position的区别

    这里offset取得是屏幕影藏的y轴的距离➕元素距离屏幕的y轴的距离. 而postion取得的则是,上一个父元素(包含postion定位的)的距离

  5. .offset()与.position()区别

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

  6. 区分jquery中的offset和position

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

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

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

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

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

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

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

随机推荐

  1. sql中count(1)、count(*)与count(列名)的区别

    1. count(1) and count(*) 当表的数据量大些时,对表作分析之后,使用count(1)还要比使用count(*)用时多了!从执行计划来看,count(1)和count(*)的效果是 ...

  2. 20190705_关于winform程序修改程序名后, 报未将对象引用设置到对象的实例

    winform做了一个小项目, 其中要用到数据库连接, 字符串, private string ConnStringSource = System.Configuration.Configuratio ...

  3. PyQt学习随笔:ListView控件增加列表项

    ListView控件如果需要增加列表项,就是在对应数据存储中插入项,这又分两种情况,一种是已知列表数据存储,一种是未知数据存储.如果是未知数据存储,可以通过: ListView控件名.model() ...

  4. python 读取excel表格内不同类型的数据

    不同类型数据对应值: #coding=utf-8 import os import xlrd from datetime import datetime,date newparh = os.chdir ...

  5. PHP 读取XML大文件格式并将其存入数据库中

    <?php     $xml = new XMLReader(); $xmlfile="./full_database.xml";#文件路径   $xml->open( ...

  6. jenkins配置--上传代码,定时执行用例,发送测试报告

    1.安装条件:jdk1.8以上的,百度jenkin进入官网--download ,根据需要的版本下载 2.jenkins概念:持续集成,jenkins开源属于插件式形式进行管理的,选择性的装插件,支持 ...

  7. Rest vs Soap 比较

    一.前言 昨天为止,政府的一个公共部门的项目顺利结束,就系统间消息传输这个点,知识点总结一下.本文主要参考octoperf的文章,链接见文末参考资料. 系统中用到的是SOAP协议进行传输数据,有人会立 ...

  8. vue插值 v-cloak

    vue插值 v-cloak 使用VUE时,页面刷新时会出现闪动的现象(即在插值时会显示两侧的 {}) 先定义一个VUE 通过选择器在style中定义v-cloak的display值为none 再在元素 ...

  9. vue第六单元(vue的实例和组件-vue实例的相关属性和方法-解释vue的原理-创建vue的组件)

    第六单元(vue的实例和组件-vue实例的相关属性和方法-解释vue的原理-创建vue的组件) #课程目标 掌握vue实例的相关属性和方法的含义和使用 了解vue的数据响应原理 熟悉创建组件,了解全局 ...

  10. 利用302绕过http协议限制

    360某处ssrf漏洞可探测内网信息(附内网6379探测脚本) http://xss.one/bug_detail.php?wybug_id=wooyun-2016-0229611