1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title></title>
  6. </head>
  7. <body>
  8.     <div id="box">box</div>
  9.     <script src="http://static01.baomihua.com/js/lib/jquery-1.4.4.min.js?t=20120926.js"></script>
  10.     <script>
  11.         /*
  12.          * position() 计算相对于偏移父元素—更通俗一点，含有 position: relative; 的元素最近的父元素或祖先元素—的位置。如果未找到这样的父元素或祖先元素，那么会计算相对于文档的位置
  13.          * offset() 则总是计算相对于文档的位置
  14.          */
  15.         console.log($('#box').offset())
  16.     </script>
  17.     <style>
  18.         #box {
  19.             width: 100px;
  20.             height: 100px;
  21.             background-color: #F00;
  22.             position: absolute;
  23.             top: 100px;
  24.             left: 100px;
  25.         }
  26.     </style>
  27.     <script>
  28.         console.log($('#box').offset()) // 希望的样式生效再去获取
  29.     </script>
  30. </body>
  31. </html>

☀【offset() / position()】的更多相关文章

  1. 【client】与【offset】

    上面主要区分了[offset]和[client]开头的各个属性的意义,下面这张图是转载的,又加入了[scroll]开头的,和元素本身的[style] clientWidth   是对象看到的宽度(不含 ...

  2. 【学习笔记】HTML position(static、fixed、relative、absolute)

    [本文转载] position的四个属性值:static.fixed.relative.absolute 下面分别讲述这四个属性:<div id="parent">   ...

  3. 【已解决】pyinstaller UnicodeDecodeError: ‘utf-8’ codec can’t decode byte 0xce in position 110: invalid continuation byte

    转载自勤奋的小青蛙本文链接地址: [已解决]pyinstaller UnicodeDecodeError: ‘utf-8’ codec can’t decode byte 0xce in positi ...

  4. 【Web动画】CSS3 3D 行星运转 && 浏览器渲染原理

    承接上一篇:[CSS3进阶]酷炫的3D旋转透视 . 最近入坑 Web 动画,所以把自己的学习过程记录一下分享给大家. CSS3 3D 行星运转 demo 页面请戳:Demo.(建议使用Chrome打开 ...

  5. Python基础之【第一篇】

    Python简介: python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解释程序,作为ABC语 ...

  6. 【地图API】为何您的坐标不准？如何纠偏？

    原文:[地图API]为何您的坐标不准?如何纠偏? 摘要:各种坐标体系之间如何转换?到底有哪些坐标体系?什么是火星坐标?为什么我的坐标,在地图上显示会有偏移?本文详细解答以上问题.最后给出坐标拾取工具. ...

  7. 【集合框架】JDK1.8源码分析之ArrayList详解(一)

    [集合框架]JDK1.8源码分析之ArrayList详解(一) 一. 从ArrayList字表面推测 ArrayList类的命名是由Array和List单词组合而成,Array的中文意思是数组,Lis ...

  8. 【Unity Shader】（九） ------ 高级纹理之渲染纹理及镜子与玻璃效果的实现

    笔者使用的是 Unity 2018.2.0f2 + VS2017,建议读者使用与 Unity 2018 相近的版本,避免一些因为版本不一致而出现的问题. [Unity Shader](三) ----- ...

  9. 【SIKIA计划】_07_Unity3D游戏开发-坦克大战笔记

    [新增分类][AudioClips]音频剪辑[AudioMixers]音频混合器[Editor][Fonts]字体[Materials]材质[Models]模型[Standard Assets] [渲 ...

随机推荐

  1. win/linux 下使用 psutil 获取进程 CPU / memory / IO 占用信息

    psutil - A cross-platform process and system utilities module for Python 1. 安装 pip 安装即可. windows 下需要 ...

  2. memcached全面剖析--4

    memcached的分布式算法   memcached的分布式 正如第1次中介绍的那样, memcached虽然称为“分布式”缓存服务器,但服务器端并没有“分布式”功能. 服务器端仅包括 第2次. 第 ...

  3. JavaScript的语法要点 2 - Scope Chain

    前文所述,JavaScript是基于词法作用域(lexically scoped)的,所以标识符被固定在它们被定义的作用域而不是语法上或是其被调用时的作用域.即全局变量的作用域是整个程序,局部变量的作 ...

  4. Super Hide IP 3.4.7.8允许您以匿名方式进行网上冲浪、 保持隐藏您的 IP 地址

    Super Hide IP 3.4.7.8 转自:http://www.0daydown.com/04/695.html Super Hide IP允许您以匿名方式进行网上冲浪. 保持隐藏您的 IP ...

  5. Web应用工作流程总结

    了解Web应用的工作过程有益于Web测试时更好的理解,Web应用工作的过程分为以下5个步骤: 1. 用户在Web浏览器中输入一个Web地址.选择一个超链接或点击一个按钮 2. Web浏览器将用户的动作 ...

  6. ko list and css gradient

    <!DOCTYPE html> <html> <head> <title></title> <script src="js/ ...

  7. Codeforces Round #327 div2

    Problem_A(591A): 题意: 有一段长度为l的路,两个人分别在两个端点,1, l. 现在已知每个人的速度为p,q. 求第一个人(初始位置在1)在他们第二次相遇的时候的位置. 当他们相遇的时 ...

  8. [转载]C# HashTable 遍历与排序

    private void Form1_Load(object sender, EventArgs e) { Hashtable ht = new Hashtable(); ht.Add("j ...

  9. uva 12648

    一个简单的搜索: 反正树的结构不会变,只需要把节点的名称换一下就行: 可惜比赛的时候思路不清晰: #include<cstdio> #define maxn 5050 #include&l ...

  10. CF Rook, Bishop and King

    http://codeforces.com/contest/370/problem/A 题意:车是走直线的,可以走任意多个格子,象是走对角线的,也可以走任意多个格子,而国王可以走直线也可以走对角线,但 ...