<!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. 《APUE》第四章笔记（3）

    文件系统 首先我们应该知道一个磁盘可以划分为多个分区,而每个分区就可以包含一个文件系统.UNIX的文件系统是这样的: 而我们主要关心的是i节点和数据块.i节点是固定长度的记录项,它包含有关文件的大部分 ...

  2. dataTable 禁止分页

    $("#id").DataTable({ "paging": false, // 禁止分页 });

  3. myeclipse10.0优化

    一.Myeclipse10修改字体  MyEclipse10是基于Eclipse3.7内核,但在Eclipse的Preferences-〉general-〉 Appearance->Colors ...

  4. 【Druid】 阿里巴巴推出的国产数据库连接池com.alibaba.druid.pool.DruidDataSource

    阿里巴巴推出的国产数据库连接池,据网上测试对比,比目前的DBCP或C3P0数据库连接池性能更好   简单使用介绍 Druid与其他数据库连接池使用方法基本一样(与DBCP非常相似),将数据库的连接信息 ...

  5. UILocalNotification本地通知

    // 执行通知一定要退出应用或挂起应用(进入后台)才能收到通知. 1.在iOS8及其以后版本中使用本地消息需要先获得用户的许可,否则无法成功注册本地消息.因此,我们将询问用户许可的代码片段添加到了ap ...

  6. Java琐记

    svn项目倒入,所选的文件夹一定是src上面以及的:然后eclipse会自动创建一个项目,项目名称就是src上级文件夹的名称:然后会按照路径下的文档结构如导入到eclipse的结构中: 被标记为// ...

  7. linux下修改IP信息

    在Linux的系统下如何才能修改IP信息 以前总是用ifconfig修改,重启后总是得重做.如果修改配置文件,就不用那么麻烦了- A.修改ip地址 即时生效: # ifconfig eth0 192. ...

  8. 排队（BZOJ1731：[Usaco2005 dec]Layout 排队布局）

    [问题描述] Czy喜欢将他的妹子们排成一队.假设他拥有N只妹纸,编号为1至N.Czy让他们站成一行,等待自己来派送营养餐.这些妹纸按照编号大小排列,并且由于它们都很想早点吃饭,于是就很可能出现多只妹 ...

  9. Python标准库与第三方库详解(转载)

    转载地址: http://www.codeweblog.com/python%e6%a0%87%e5%87%86%e5%ba%93%e4%b8%8e%e7%ac%ac%e4%b8%89%e6%96%b ...

  10. python里面的几个编码函数

    时不时的被编码折腾一下 >>> print urllib.quote('中国') %E4%B8%AD%E5%9B%BD >>> s = '%E4%B8%AD%E5% ...