<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. 381. Insert Delete GetRandom O(1) - Duplicates allowed允许重复的设计1数据结构

    ［抄题］: Design a data structure that supports all following operations in average O(1) time. Note: Dup ...

  2. HBase、HDFS与本地文件系统之间的关系

    一.文件系统 1. 概念 所谓文件系统,是操作系统用于明确磁盘或分区上的文件的方法和数据结构:即在磁盘上组织文件的方法.也指用于存储文件的磁盘或分区,或文件系统种类. 2. Local File Sy ...

  3. 相机IMU融合四部曲（二）：误差状态四元数详细解读

    相机IMU融合四部曲(二):误差状态四元数详细解读 极品巧克力 前言 上一篇文章,<D-LG-EKF详细解读>中,讲了理论上的SE3上相机和IMU融合的思想.但是,还没有涉及到实际的操作, ...

  4. TF Boys (TensorFlow Boys ) 养成记（五）： CIFAR10 Model 和 TensorFlow 的四种交叉熵介绍

    有了数据,有了网络结构,下面我们就来写 cifar10 的代码. 首先处理输入,在 /home/your_name/TensorFlow/cifar10/ 下建立 cifar10_input.py,输 ...

  5. 3.3.5 高效读取：不变模式下的CopyOnWriteArrayList

    源码分析:读写(get,add) 一:get 方法 private E get(Object[] a, int index) { return (E) a[index];}可以看到读取数据的时候 没有 ...

  6. ASP.NET MVC WebApi接口授权验证

    对于很任何多开发者来说,不管是使用任何一种框架,或者是使用任何一种语言,都要使用面向接口编程.使用面向接口编程的时候,那么就会有很多的权限验证,用户验证等等. 特别是对于一些系统来说,别人想要对接你的 ...

  7. 编写高质量代码改善C#程序的157个建议——建议89：在并行方法体中谨慎使用锁

    建议89:在并行方法体中谨慎使用锁 除了建议88所提到的场合,要谨慎使用并行的情况还包括:某些本身就需要同步运行的场合,或者需要较长时间锁定共享资源的场合. 在对整型数据进行同步操作时,可以使用静态类 ...

  8. react学习笔记（1）：从前后端分离到项目部署

    我来到现在这家公司有一年多的时间,一直做的是财政系统相关的产品,前端的技术栈用的是传统的jQuery+bootStrap+requireJs,随着项目的开发,越来越多的弊病凸显出来. 首先是前后端的代 ...

  9. 面试题： 已知一个含有n个不同元素的集合，要求打印其所有具有k个元素的子集（不允许有重复的）

    TX面试题2: 已知一个含有n个元素的集合,要求打印其所有具有k个元素的子集(不允许有重复的) 题目分析, 为了便于说明,不妨将问题简化一下: 已知一个盒子中有n个不同的球,分别标记为{a1,a2,. ...

  10. Unity3D 之PC客户端的分辨率自定义

    在Player Setting中可以自定义分辨率,但在PC版本中如果使用Display Resolution Dialog选项,会发现在分辨率选项中只有预定义的那些,而并没有在Player Setti ...