<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="utf-8">

    <title></title>

</head>

<body>

    <div id="box">box</div>

    <script src="http://static01.baomihua.com/js/lib/jquery-1.4.4.min.js?t=20120926.js"></script>

    <script>

        /*

         * position() 计算相对于偏移父元素—更通俗一点，含有 position: relative; 的元素最近的父元素或祖先元素—的位置。如果未找到这样的父元素或祖先元素，那么会计算相对于文档的位置

         * offset() 则总是计算相对于文档的位置

         */

        console.log($('#box').offset())

    </script>

    <style>

        #box {

            width: 100px;

            height: 100px;

            background-color: #F00;

            position: absolute;

            top: 100px;

            left: 100px;

        }

    </style>

    <script>

        console.log($('#box').offset()) // 希望的样式生效再去获取

    </script>

</body>

</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. 高能物理/HyperPhysics的网站/Website

    参考: 基础物理-高能物理［Hyperphysics］

  2. centos 关闭触摸板,触摸板点击

    yum install xorg-x11-apps xinput –list 由图可以看出俺的本本触摸板ID为14,于是可以通过以下命令开启与关闭它: 禁止touchpad:xinput set-in ...

  3. Centos6.5下rsync文件同步安装配置及遇到的问题解决方法

    实验节点如下: 源节点:192.168.0.111 备份节点:192.168.0.112 ------------------------------以下部分在两个节点上执行1.防火墙开放873端口( ...

  4. WPF读书笔记（第一天）

    今天开始学习WPF,大家都推荐<深入浅出WPF>这本书,一下是我觉得此书中重要的地方,记录下来以便以后回顾,也希望其他人看到了对你们有帮助. 1.XAML是可扩展应用程序标记语言 是WPF ...

  5. 【BZOJ】1925: [Sdoi2010]地精部落 DP+滚动数组

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1925 题意:输入一个数N(1 <= N <= 4200),问将这些数排列成折线 ...

  6. 【重构】m站重构思路

    不重构全部模块,只对以下内容做基础重构就可以,第三方方式 1.验证码作为独立的服务,用户写入验证码获得id,服务端获取验证码id对应内容(根据时间和存储空间 清理验证码) 2.支付接口h5环境独立配置 ...

  7. com.mchange.v2.c3p0.ComboPooledDataSource

    C3P0是一个开放源代码的JDBC连接池,它在lib目录中与Hibernate一起发布,包括了实现jdbc3和jdbc2扩展规范说明的Connection 和Statement 池的DataSourc ...

  8. OAuth在WebApi中的使用，前后台分离的调用方式

    前段时间由于公司架构服务层向WebApi转换,就研究了OAuth在WebApi中的使用,这中间遇到了很多坑,在此记录一下OAuth的正确使用方式. 1.  OAuth是做什么的? 在网上浏览时,大家都 ...

  9. oracle 内置函数 least decode

    在博客园的第一个博客,为什么叫第一个.... oracle 内置函数 east(1,2,3,4.....) 可以有多个值,最多几个?不知道欢迎补充 ,,,) from dual 这个函数返回是1,就是 ...

  10. Linux下使用dnf包管理器安装异常后导致的clear不可用

    该命令被包ncurses包含: 名称 : ncurses架构 : x86_64时期 : 0版本 : 5.9发布 : 16.20140323.fc21大小 : 433 k仓库 : @System概要 : ...