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. MySQL的mysql.sock文件作用（转）

    mysql.sock是可用于本地服务器的套接字文件.它只是另一种连接机制. 不包含任何数据,但仅用于从客户端到本地服务器来进行交换数据.

  2. ISO7816 (part 1-3) asynchronous smartcard information

    http://java.inf.elte.hu/java-1.3/javacard/iso7816.txt ============================================== ...

  3. Running multiple instances of Xamarin Studio on a Mac

    I love developing software on my MacBook Air! I got the latest version with the maximum possible spe ...

  4. .NET泛型01,为什么需要泛型,泛型基本语法

    .NET泛型或许是借鉴于C++泛型模版,借助它可以实现对类型的抽象化.泛型处理,实现了类型和方法之间的解耦.一个最经典的运用是在三层架构中,针对不同的领域模型,在基接口.基类中实现针对各个领域模型的泛 ...

  5. Tomcat与Gzip与缓存

    国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...

  6. UI----------------Toggle

    Is On:是否已经勾选上了 Toggle Transition:渐变效果 Graphic:勾选标志的图,就是那个勾 Group:多选组 On Value Changed:当选项改变时,触发事件 多选 ...

  7. windows下的Nginx+Squid+Tomcat+Memcached集群

  8. 使用POI操作Excel时对事先写入模板的公式强制执行

    场景:POI读取Excel模板. 当使用POI操作Excel时,发现由POI生成的公式能够在打开Excel是被执行, 而事先手工写入Excel模板文件的公式则不自动被调用,必须手动双击该Cell才能生 ...

  9. coco游戏android.mk

    LOCAL_PATH := $(call my-dir) include $(CLEAR_VARS) LOCAL_MODULE := game_shared LOCAL_MODULE_FILENAME ...

  10. Python的开源人脸识别库：离线识别率高达99.38%

    Python的开源人脸识别库:离线识别率高达99.38%   github源码:https://github.com/ageitgey/face_recognition#face-recognitio ...