<script src="jquery/jquery-3.3.1.min.js"></script>

    <script type="text/javascript">

        $(function () {

            $("li").click(function () {

                $(this).toggleClass('red');

            })

            console.log($("ul").offset().top)

            console.log($("ul").position().top)

        })

    </script>

</head>

<body>

<div style="position: absolute;top: 100px;left: 100px;">

    <ul style="position: absolute;top: 10px;left: 10px;">

        <li class="red">ads</li>

        <li>ads</li>

        <li>ads</li>

        <li>ads</li>

        <li>ads</li>

    </ul>

</div>

结果：

可以看出offset()是相对于body来说的，而position是相对于父元素来说的

jquery offset()和position()的区别的更多相关文章

  1. jQuery获得元素位置offset()和position()的区别

    jQuery获得元素位置offset()和position()的区别 jQuery 中有两个获取元素位置的方法offset()和position(),这两个方法之间有什么异同 offset(): 获取 ...

  2. offset()与position()的区别

    jQuery中有两个获取元素位置的方法offset()和position(),两者的定义如下: offset(): 获取匹配元素在当前视口的相对偏移. 返回的对象包含两个整形属性:top 和 left ...

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

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

  4. jquery的offset与position的区别

    这里offset取得是屏幕影藏的y轴的距离➕元素距离屏幕的y轴的距离. 而postion取得的则是,上一个父元素(包含postion定位的)的距离

  5. jQuery offset，position，offsetParent，scrollLeft，scrollTop html控件定位 css position

    定位应用:点击一个按钮,然后在按钮的右边弹出一个提示框 1,提示框相对于屏幕进行定位,那么使用offset来取得当前按钮相对于body的top和left,然后通过$('body').prepend(t ...

  6. js和jq中常见的各种位置距离之offset()和position()的区别（二）

    offset()返回的是相对于当前文档的坐标,position()返回的是相对于其定位的祖辈元素的坐标. 使用position()方法时事实上是把该元素当绝对定位来处理,获取的是该元素相当于最近的一个 ...

  7. .offset()与.position()区别

    jQuery中有两个获取元素位置的方法offset()和position(),两者的定义如下:   offset():获取匹配元素在当前视口的相对偏移.返回的对象包含两个整形属性:top 和 left ...

  8. 区分jquery中的offset和position

    一次又一次地碰到需要获取元素位置的问题, 然后一次又一次地查offset和position的区别. 忍不了了, 这次一定得想办法记下来. position是元素相对于父元素的位置. 这个好记, par ...

  9. Jquery中的offset()和position()深入剖析

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

随机推荐

  1. 基于Mybatis分页插件PageHelper

    基于Mybatis分页插件PageHelper 1.分页插件使用 1.POM依赖 PageHelper的依赖如下.需要新的版本可以去maven上自行选择 <!-- PageHelper 插件分页 ...

  2. Linux的kickstart安装详解

    Linux的kickstart安装详解 一.什么是kickstart? kickstart安装是redhat开创的按照你设计好的方式全自动安装系统的方式.安装方式可以分为光盘.硬盘.和网络.此文将以网 ...

  3. 解决VirtualBox 上的XP 关机时重启 ， 启动时蓝屏 ，点击电源选项蓝屏

    三个问题一次性解决. 启动时的蓝屏显示错误信息是: STOP 0x000000CE (...) DRIVER_UNLOADED_WITHOUT_CANCELLING_PENDING_OPERATION ...

  4. SQL Server 2005/2008/2012中应用分布式分区视图

    自2000版本起,SQL Server企业版中引入分布式分区视图,允许你为分布在不同的SQL 实例的两个或多个水平分区表创建视图. 简要步骤如下:根据Check约束中定义的一组值把大表分割成更小的一些 ...

  5. Linux ftp Command

    一.ftp的get命令和mget命令有何不同? get一次只下载一个文件:mget一次可以下载多个文件,而且支持通配符,需要注意的是在mget的时侯,需要对每一个文件都选择y/n,如果想不交互的下载全 ...

  6. java判断一个数是否为素数[转]

    http://blog.csdn.net/lwcumt/article/details/8027586 import java.util.Scanner; //质数又称素数,是指在一个大于1的自然数中 ...

  7. [Training Video - 3] [Groovy in Detail] Non-static and Static functions, initializing log inside class

    log.info "starting" // we use class to create objects of a class Planet p1 = new Planet() ...

  8. mosquitto ---配置SSL/TLS linux

    mosquitto ---配置SSL/TLS 摘自: https://www.cnblogs.com/saryli/p/9821343.html 在服务器电脑上面创建myCA文件夹, 如在/home/ ...

  9. Unknown column 'sid' in 'field list'

    不知道sid命名的列,这是这个错误的提示 比对配置文件,看起实体跟数据库表的对应是否,然后查看找到问题是查找语句中的表名字,跟数据库中的表名不是一个名字.

  10. CodeForces 427A Police Recruits (水题)

    题意:给定 n 个数,有正数和-1, -1表示罪犯,正数表示招了几个警察,一个警察只能看一个罪犯,并且要按顺序,问你有多少罪犯逃脱. 析:很简单么,从开始扫到最后,把是正数就加上,是-1判断剩余警察大 ...