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. sql prompt5安装好了，也破解完成了，然后到SQL里面还是没有提示是为什么？

    勾上这个,祝你成功!

  2. 转：Windows中的命令行提示符里的Start命令执行路径包含空格时的问题

    转自:http://www.x2009.net/articles/windows-command-line-prompt-start-path-space.html 当使用Windows 中的命令行提 ...

  3. 解决Xilinx ISE在Win8下打开崩溃闪退的方法

    http://www.121down.com/article/article_13651.html 坑爹的ISE对win8无法完美支持(包括目前最新的14.6),在使用64位ISE时点击OPEN之类的 ...

  4. 算法学习 - 平衡二叉查找树实现(AVL树)

    平衡二叉查找树 平衡二叉查找树是非常早出现的平衡树,由于全部子树的高度差不超过1,所以操作平均为O(logN). 平衡二叉查找树和BS树非常像,插入和删除操作也基本一样.可是每一个节点多了一个高度的信 ...

  5. 使用Bootstrap 3开发响应式网站实践07,页脚

    页脚部分比较简单,把一个12列的Grid切分. <footer> <div class="container"> <div class="r ...

  6. C++中的public、private、protected成员继承问题

        我是C++菜鸟,刚学了一点C++. 先看例子1: /* Item.h */ #include <iostream> #include <string> class It ...

  7. 把NDK的工具链提取出来单独使用

    独立toolchain 把NDK压缩包解压到系统,如/mnt目录下,后在/mnt目录下建立文件夹my_ndk_toolchain,然后再/mnt目录下执行以下命令:/mnt/android-ndk-r ...

  8. 跟我学Spring3（9.1）：Spring的事务之数据库事务概述

    原文出处: 张开涛 9.1 数据库事务概述 事务首先是一系列操作组成的工作单元,该工作单元内的操作是不可分割的,即要么所有操作都做,要么所有操作都不做,这就是事务. 事务必需满足ACID(原子性.一致 ...

  9. MySQL中的模糊查询和通配符转义

    MySQL中实现模糊查询有2种方式:一是用LIKE/NOT LIKE,二是用REGEXP/NOT REGEXP(或RLIKE/NOT RLIKE,它们是同义词). 第一种是标准的SQL模式匹配.它有2 ...

  10. 卷积交织/解交织C++程序

    交织基数为M,交织深度为I的卷积交织/解交织程序,延时为I*(I-1)*M. #include <iostream> #include <vector> #include &l ...