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. IOS快速入门

    http://www.cnblogs.com/wellsoho/p/4313312.html

  2. java反射知识点总结

    一.java反射基础 1.1 什么叫java反射? 答:程序运行期间,动态的获取类的基本信息.比如:创建对象,调用类的方法,获得类的基本结构.这样给程序设计提供了很大的灵活性.个人总结就是:根据动态需 ...

  3. 【linux】linux查看文件大小，磁盘大小

    查看指定目录下 文件或目录大小超过多少的 查看 /backup/tomcat7/ 目录下 超过500M大小的文件 并展示 文件详情 find /backup/tomcat7/  -type f -si ...

  4. UML：概要设计，用什么画我的类图？

    背景 做过需求之后,很少使用 UML 画概要设计,这几天尝试的用了几个工具,最总还是选择了 VisualStudio. Edraw 详细信息很难编辑,如:签名. Viso 添加成员太麻烦了. Visu ...

  5. Spring事务处理探究

    开发环境: OS:windows XP       Web Server: jakarta-tomcat-5.0.28       DataBase Server: MS SQL Server 200 ...

  6. java.lang.UnsatisfiedLinkError：no dll in java.library.path终极解决之道

     Java调用Dll时,会出现no dll in java.library.path异常,在Java Project中不常见,因为只要将Dll拷贝到system32目录下即可:         但若是 ...

  7. linux usb信息查看与调试

    lsusb cat /sys/kernel/debug/usb/devices T:  Bus=02 Lev=00 Prnt=00 Port=00 Cnt=00 Dev#=  1 Spd=12   M ...

  8. mahout源码分析之DistributedLanczosSolver（五）Job over

    Mahout版本:0.7,hadoop版本:1.0.4,jdk:1.7.0_25 64bit. 1. Job 篇 接上篇,分析到EigenVerificationJob的run方法: public i ...

  9. [leetcode]Construct Binary Tree from Preorder and Inorder Traversal @ Python

    原题地址:http://oj.leetcode.com/problems/construct-binary-tree-from-preorder-and-inorder-traversal/ 题意:根 ...

  10. iOS开发-iPad侧边栏Tab选项卡切换

    Android中习惯了叫侧边栏,iOS中如果不习惯侧边栏称呼的话可以叫dock,侧边栏的切换,类似于Android中的底部导航栏的切换,iPad尺寸大了一些,导航的栏目放在侧边会显示的更好耐看一些.选 ...