<!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. DataList和Repeater

    DataList和Repeater是两个十分有用的控件,在新闻列表和图片展示的地方经常用到.在这里简单的把他们介绍一下. 1.DataList: 前端页面: <asp:DataList ID=& ...

  2. 【转】WPF获取外部EXE图标最简单的方法

    首先在工程添加对System.Drawing的引用 创建以下方法: public static ImageSource GetIcon(string fileName) { System.Drawin ...

  3. Sublime Text 2 插件

    一直以来写代码都是用的EditPlus,也尝试了一段时间学习Vim这神器,后来因为使用不习惯还是改回了原来的EditPlus.前几天朋友想我推荐了Sublime Text 2,喜欢尝鲜我的肯定是不会放 ...

  4. Codeforces Round #344 (Div. 2) C. Report

    Report 题意:给长度为n的序列,操作次数为m:n and m (1 ≤ n, m ≤ 200 000) ,操作分为t r,当t = 1时表示将[1,r]序列按非递减排序,t = 2时表示将序列[ ...

  5. MVC5 学习笔记2

    去除VS Browser Link废代码 在webconfig中添加 <configuration> <appSettings> <add key="vs:En ...

  6. CODEVS 1004四子连棋

    [题目描述 Description] 在一个4*4的棋盘上摆放了14颗棋子,其中有7颗白色棋子,7颗黑色棋子,有两个空白地带,任何一颗黑白棋子都可以向上下左右四个方向移动到相邻的空格,这叫行棋一步,黑 ...

  7. iphone下overflow失效问题的解决方法

    overflow-y: auto; -webkit-overflow-scrolling:touch; /*加上这个让浏览器支持touch和自动滚动这样界面就可以滚动了*/

  8. VS调试错误：“没有可用于当前位置的源代码”的解决方案

    今天,有朋友在问为什么我在调试的时候会出现"没有可用于当前位置的源代码"的错误呢? MSDN上的说法:没有可用于当前位置的源代码,项目不包含您试图查看代码的源代码.原因通常是双击了 ...

  9. ctf总结

    在过去的一个学期中,草人在西普学院还有一些其他安全夺旗网站上刷了一些题,草人我是菜鸟一个,刚开始很是苦恼,所以经历过以后希望将之分享给一起学习安全的同学,目的呢是希望以后学习的人能尽快理清学习思路,进 ...

  10. python中数据的保存

    1.将list中的数据写入到excel文件中 利用python包numpy(实现方式应该有许多种,这里只是记录成功实现的一种)中的savetxt 局限性:要保存的list可以为[1,2,3,4,5]这 ...