---恢复内容开始---

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

先看看API对这这两个方法的定义:

offset():

获取匹配元素在当前视口的相对偏移。

返回的对象包含两个整形属性:top 和 left。此方法只对可见元素有效。

position():

获取匹配元素相对父元素的偏移。

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

真的就这么简单吗?实践出真知。

先来看看在jQuery框架源码里面,是怎么获得position()的:

//Get *real* offsetParent
var offsetParent = this.offsetParent(),
//Get correct offsets
offset = this.offset(),
parentOffset = /^body|html$/i.test(offsetParent[0].tagName) ? {
top : 0,
left : 0
}
: offsetParent.offset();
//Subtract element margins
//note: when an element has margin: auto the offsetLeft and marginLeft
//are the same in Safari causing offset.left to incorrectly be 0
offset.top -= num(this, marginTop);
offset.left -= num(this, marginLeft);
//Add offsetParent borders
parentOffset.top += num(offsetParent, borderTopWidth);
parentOffset.left += num(offsetParent, borderLeftWidth);
//Subtract the two offsets
results = {
top : offset.top - parentOffset.top,
left : offset.left - parentOffset.left
};

注意最后那段 代码:

results = {
top: offset.top- parentOffset.top,
left: offset.left - parentOffset.left
};

代码的意思就是获取本身元素距离它的父元素的距离。

用图如下所示:

也就是元素B距离元素A的距离。

在没有position()方法之前,计算B到A的距离 只有通过 先计算B距浏览器左边距 减去 A的。

有了position()方法之后,就可以快速计算出来。不过在使用position()之前,你需要了解一下它们的定位方式。

经过试验,会得出如下结论:

1.使用position()方法时事实上是把该元素当绝对定位来处理,获取的是该元素相当于最近的一个拥有绝对或者相对定位的父元素的偏移位置。
2.使用position()方法时如果其所有的父元素都为默认定位(static)方式,则其处理方式和offset()一样,是当前文档窗口的相对偏移。
3.使用offset()方法不管该元素如何定位,也不管其父元素如何定位,都是获取的该元素相对于当前文档(document)视口的偏移。
4.offset()的计算不包括元素本身的 margin 值(包括border值),position() 的计算包括 margin值。

那么我们应该如何来合理的使用position()和offset()呢? 

就我个人的经验,通常获取一个元素A的位置是为了让另外的一个元素B正好出现在A元素的附近。通常有2种情况:

1.要显示的元素B存放在DOM的最顶端或者最底端(即其父元素就是body),这个时候用offset()是最好的;

2.若要显示的元素B存放在元素A的同一父元素下(即B为A的兄弟节点),这个时候使用position() 是最合适的;

那么我现在问你,如果我打算做一个跟随屏幕滚动的层,使用哪个方法呢?

如果你答得是:offset(),那么恭喜你。

如果我打算做一个类似于幻灯片的效果,你会使用哪个方法呢?

综上所述,使用position()还是offset()取决于你被控制的元素B DOM所在的位置。

延伸阅读:

JavaScript如何获取/计算页面元素的offset?

jQuery入门(2)使用jQuery操作元素的属性与样式

关于jQuery中的 offset() 和 position() 的用法的更多相关文章

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

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

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

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

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

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

  4. 区分jquery中的offset和position

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

  5. Jquery中的offset()和position()

    今天遇到这个偏移量的问题,特做此记录.以便日后查看. 先看看这两个方法的定义. offset(): 获取匹配元素在当前视口的相对偏移. 返回的对象包含两个整形属性:top 和 left.此方法只对可见 ...

  6. [转载]Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结

    本文对Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法进行了详细的总结,需要的朋友可以参考下,希望对大家有所帮助. 详细解读Jquery各Ajax函数: ...

  7. [转载]jQuery中wrap、wrapAll和wrapInner用法以及区别

    原文地址:jQuery中wrap.wrapAll和wrapInner用法以及区别作者:伊少君 原文: <ul>   <li title='苹果'>苹果</li>   ...

  8. Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结

    本文对Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法进行了详细的总结,需要的朋友可以参考下,希望对大家有所帮助. 详细解读Jquery各Ajax函数:  ...

  9. 转载 : Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结

    Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结 投稿:jingxian 字体:[增加 减小] 类型:转载 时间:2013-11-14我要评论 本文是 ...

随机推荐

  1. AD服务器安装文档

    Windows Server 2008 R2 AD服务器搭建 1. AD服务器简介 应用到: Windows Server 2003, Windows Server 2003 R2, Windows ...

  2. jquery 通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素(比如由脚本创建的新元素)

    jquery 通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素(比如由脚本创建的新元素) $("ul").append("<li cla ...

  3. centos7安装lamp

    一.准备工作 1.   下载并安装CentOS7.2,配置好网络环境,确保centos能上网,可以获取到yum源. centos7.2的网络配置: vim /etc/sysconfig/network ...

  4. tomcat打开gzip、配置utf-8

    在部署描述文件中配置如下内容:(web.xml) 打开gzip compression="on"配置utf-8 URIEncoding="UTF-8" < ...

  5. Shell语言系列之一:文件处理

    前言 &nbsp 标准输入/输出可能是软件工具设计原则里最基本的观念了.有很多UNIX程序都遵循这一设计历练.默认情况下,他们会读取标准输入,写入标准输出,并将错误信息传递给标准错误输出. & ...

  6. 【严蔚敏】【数据结构(C语言版)】 求n的阶乘

    阶乘函数为: 使用递归即可求得. #include <stdio.h> #include <stdlib.h> int Fact(int m){ ) ; ); //递归求阶乘 ...

  7. 保存最后N个元素

    cookbook系列 问题:对要搜索的值的最后几项做个有限的历史记录. 方案: #coding=utf- from collections import deque def search(lines, ...

  8. [实战]MVC5+EF6+MySql企业网盘实战(7)——文件上传

    写在前面 周末了,在家继续折腾网盘,今天实现网盘文件的上传. 系列文章 [EF]vs15+ef6+mysql code first方式 [实战]MVC5+EF6+MySql企业网盘实战(1) [实战] ...

  9. CentOS7.6打开的程序窗口居中

    每次在CentOS7中打开新的窗口都会靠左上角显示,所以每次打开一个窗口都要多做一步操作,将窗口移到屏幕中间来,强迫症的我觉得太麻烦了,所以… 安装ccsm yum -y install  compi ...

  10. 五、oracle 表管理

    一.表名和列名的命名规则1).必须以字母开头2).长度不能超过30个字符3).不能使用oracle的保留字4).只能使用如下字符 a-z,a-z,0-9,$,#等 二.数据类型1).字符类char 长 ...