1、position方法

jquery api地址：http://jquery.cuishifeng.cn/position.html

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

2、说明

2.1 与offset()区别

.offset()是获得该元素相对于documet的当前坐标

.position()方法可以取得元素相对于父元素的偏移位置，父元素为该元素最近的而且被定位过的祖先元素。

2.2 值计算

.元素本身所占用的边框，边距和填充的大小不计。

.父元素的边框和边距不计，父元素的填充计算在内。

3、示例代码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>jQuery position()示例</title>

        <style>

            html {

                line-height: 1.15;

            }

            /*父元素--相对定位*/

            .parent {

                position: relative;

                width: 200px;

                height: 400px;

                /*父元素的margin不计算在内*/

                margin-top: 10px;

                /*父元素的border不计算在内*/

                border: 1px solid green;

                /*父元素的padding计算在内*/

                padding-top: 10px;

            }

            .child-1 {

                width: 100px;

                height: 100px;

                margin: 0 auto;

                border: 1px solid #2E8DED;

            }

            .child-2 {

                width: 100px;

                height: 100px;

                /*子元素的margin不计算在内*/

                margin: 10px auto 0;

                /*子元素的border不计算在内*/

                border: 1px solid #2E8DED;

                /*子元素的padding不计算在内*/

                padding: 10px;

            }

        </style>

    </head>

    <body>

        <div class="parent">

            <p class="child-1">

                first child

            </p>

            <p class="child-2" id="no-2">

                second child

            </p>

        </div>

        <script src=".output/js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>

        <script type="text/javascript">

            $(document).ready(function() {

                //获取child-2子元素距离父元素的距离

                console.log($('#no-2').position().top);

            });

        </script>

    </body>

</html>

4、注意

对于文字的line-height等属性，浏览器（chrome、IE、Firefox）默认大小不一致，因此不同的浏览器position()在计算尺寸时会存在不一致，因此必须保证所有浏览器一致的line-height等属性。

示例代码为没有设置line-height的例子，position()在不同的浏览器上计算出的值不一样。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>jQuery position()示例</title>

        <style>

            html {

                /*必须给予一致的设置,否则position()计算值不同*/

                /*line-height: 1.15;*/

            }

            /*父元素--相对定位*/

            .parent {

                position: relative;

                width: 200px;

                height: 400px;

                /*父元素的margin不计算在内*/

                margin-top: 10px;

                /*父元素的border不计算在内*/

                border: 1px solid green;

                /*父元素的padding计算在内*/

                padding-top: 10px;

            }

            .child-1 {

                width: 100px;

                height: 100px;

                margin: 0 auto;

                border: 1px solid #2E8DED;

            }

            .child-2 {

                width: 100px;

                height: 100px;

                /*子元素的margin不计算在内*/

                margin: 10px auto 0;

                /*子元素的border不计算在内*/

                border: 1px solid #2E8DED;

                /*子元素的padding不计算在内*/

                padding: 10px;

            }

        </style>

    </head>

    <body>

        <div class="parent">

            文字文字

            <p class="child-1">

                first child

            </p>

            <p class="child-2" id="no-2">

                second child

            </p>

        </div>

        <script src=".output/js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>

        <script type="text/javascript">

            $(document).ready(function() {

                //获取child-2子元素距离父元素的距离

                console.log($('#no-2').position().top);

            });

        </script>

    </body>

</html>

jquery position方法使用及兼容性的更多相关文章

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

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

  2. jQuery Ajax 方法调用 Asp.Net WebService 以及调用aspx.cs中方法的详细例子

    一.jQuery Ajax 方法调用 Asp.Net WebService (引自Terry Feng) Html文件 <!DOCTYPE html PUBLIC "-//W3C//D ...

  3. Jquery 扩展方法实现原理

    JSONP原理 首先:JSON和JSONP是不一样的概念. JSON是一种数据交换格式,而JSONP是非正式传输协议. 该协议的一个要点就是允许用户传递一个callback参数给服务端,然后服务端返回 ...

  4. jquery on方法（事件委托）

    jquery绑定事件处理函数的方法有好几个,比如:bind(),on(),delegate(),live(). 其中delegate和live都是用on实现的,效果也类似,live好像在1.7版本中已 ...

  5. html 5 data-* (dataset) 属性和 jquery data方法比较

    一些文章在介绍html 5 data-* (dataset)属性时,会提到jquery的data方法,认为data方法能够很好的利用html 5的这个特性.但实际上,二者的兼容性是很差的.下面给出一段 ...

  6. 微信自带浏览器被输入法阻挡文本框的 jQuery 解决方法 by FungLeo

    微信自带浏览器被输入法阻挡文本框的 jQuery 解决方法 by FungLeo 前言 做好了项目之后,在各种浏览器里面測试,都没有问题.非常高兴,交付后端使用.然而发如今微信自带浏览器里面,却是出现 ...

  7. jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法

    jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jq ...

  8. jquery clearQueue方法 语法

    jquery clearQueue方法 语法 作用:clearQueue() 方法停止队列中所有仍未执行的函数.与 stop() 方法不同,(只适用于动画),clearQueue() 能够清除任何排队 ...

  9. jQuery Ajax方法调用 Asp.Net WebService、WebMethod 的详细实例代码

    将以下html存为ws.aspx <%@ Page Language="C#" AutoEventWireup="true" %> <scri ...

随机推荐

  1. 传智播客PHP面试题宝典开放下载

    上下卷面试题更新完毕,一部让菜鸟4k+入职的 面试题宝典 http://php.itcast.cn/news/20130806/11490333788.shtml php视频教程 下载 http:// ...

  2. 自定义MVC视图引擎ViewEngine 创建Model的专属视图

    MVC内置的视图引擎有WebForm view engine和Razor view engine,当然也可以自定义视图引擎ViewEngine.本文想针对某个Model,自定义该Model的专属视图. ...

  3. MVC扩展DataAnnotationsModelMetadataProvider给model属性对应的页面元素添加任意属性和值

    比如,有这样一个类: public class User    {        public string Name { get; set; }    } 当在强类型视图页,显示属性Name对应的i ...

  4. EXC_BAD_ACCESS(code=2,address=0xcc 异常解决 及 建议不要在子线程中刷新界面

    iOS 上不建议在非主线程进行UI操作,在非主线程进行UI操作有很大几率会导致程序崩溃,或者出现预期之外的效果. 我开始不知道这一点,在子线程中进行了弹窗操作,结果程序就出问题了! 报的错误是(EXC ...

  5. [原] corePlot 类库与iOS自带类库使用方法对比（很多开源代码都有这个特点）

    ——人类最倚重的是自己的“以往经验”.—— 我们直接看一下在corePlot 类库和iOS自带类中为一个控件设置文本显示格式的实现.   * corePlot 类库中,为一个对象设置标题显示格式 , ...

  6. 【docker】docker容器和宿主机之间文件互传，互相拷贝

    原文地址:https://www.cnblogs.com/areyouready/p/8973495.html [注意:命令中符号均为英文符号] 1.从容器里面拷文件到宿主机 答:在宿主机里面执行以下 ...

  7. Android.mk中引用第3方动态库

    Android.mk 文件内容: LOCAL_PATH:= $(call my-dir) include $(CLEAR_VARS) LOCAL_MODULE_TAGS := optional LOC ...

  8. [MAC OS] 解压Assets.car获取资源图片

    reference to  : http://www.jianshu.com/p/a5dd75102467 今天想获取APP的资源,但是查看xxx.app文件夹里面,缺少了大部分资源.在文件夹里面发现 ...

  9. C语言运算符优先级及结合性

    今天去翻了下C语言运算符的优先级和结合性,发现当初学习的时候就没认真记住,惭愧.发现一篇讲得不错的文章,编辑了下转来供以后翻阅. C语言运算符优先级表(由上至下,优先级依次递减) 运算符 结合性 () ...

  10. 浅谈jQuery easyui datagrid操作单元格样式

    今天项目上遇到问题,就是表格风格统一的问题,由于用了2个不同的框架,所以如果要大修比较麻烦,考虑到修改表格样式工作量会少很多,所以考虑修改jQuery easyui datagrid数据网格的样式. ...