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. WhatsApp & Tasker for Android – Read & Write messages

    WhatsApp & Tasker for Android – Read & Write messages The requirement for the automation is ...

  2. perf 工具介绍1

    https://perf.wiki.kernel.org/index.php/Tutorial http://os.51cto.com/art/201105/265133.htm 在LINUX 源代码 ...

  3. Windows程序调试系列: 使用VC++生成调试信息 转

    Windows程序调试系列: 使用VC++生成调试信息 ZhangTao,zhangtao.it@gmail.com, 译自 “Generating debug information with Vi ...

  4. 【BestCoder】【Round#42】

    模拟+链表+DP Orz AK爷faebdc A Growin要跟全部的n个人握手共2n杯香槟,再加上每对关系的两杯香槟,直接统计邻接矩阵中1的个数,再加2n就是answer //BestCoder ...

  5. hadoop基准測试

    写測试hadoop jarhadoop-0.20.2-test.jar TestDFSIO -write -nrFiles 10 -fileSize 1000 ----- TestDFSIO ---- ...

  6. Redis设计与实现读书笔记——简单动态字符串

    前言 项目里用到了redis数据结构,不想只是简单的调用api,这里对我的读书笔记做一下记录.原文地址: http://www.redisbook.com/en/latest/internal-dat ...

  7. crtmpserver实现防盗流和流推送验证

    Protecting your streams from webpage copy&paste flash code, listing or recording 保护流,防止在页面上被复制&a ...

  8. JavaScript快速检测浏览器对CSS3特性的支持情况

    项目中使用动画效果在IE9下不支持,所以写了个判断浏览器是否支持动画的函数,进而扩展到下面判断浏览器支持任一特定CSS3属性的函数. function supportAnimation(){ var ...

  9. C/C++语言中变量作用域：局部变量，全局变量，文件级变量

    C/C++语言中的变量分为全局变量和局部变量. 这样的划分方式的根据是变量的可见范围或者叫做作用域. 1 局部变量 局部变量指的是定义在{}中的变量,其作用域也在这个范围内.尽管常见的局部变量都是定义 ...

  10. 转： 网卡名字eth0,eth1的修改方法

    转自:http://longwind.blog.51cto.com/419072/982738 我使用这个方法生效: 现象:只有eth2,    vi /etc/udev/rules.d/70-per ...