This property will return null on Webkit if the element is hidden (the style.display of this element or any ancestor is "none") or if the style.position of the element itself is set to "fixed".

This property will return null on Internet Explorer (9) if the style.position of the element itself is set to "fixed". (Having display:none does not affect this browser.)

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

</head>

<body>

    <style>

        *{margin:0;padding:0}

        div{width:50%;padding:20px;border:5px solid green}

        #box1{position:relative}

        #box4{position:absolute;display:none;border-color:red}

    </style>

    <div id="box1">

        <div id="box2">

            <div id="box3">

                <div id="box4"></div>

            </div>

        </div>

    </div>

    <script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.3.min.js"></script>

    <script>

        var $box3 = $('#box3')

        var $box4 = $('#box4')

        $box4.css({visibility:'hidden',display:'block'})

        var $box = $box4.offsetParent()

        // or

        var $box = $(document.getElementById('box4').offsetParent)

        $box4.css({visibility:'',display:'none'})

        var offset1 = $box3.offset()

        var offset2 = $box.offset()

        $box4.css({

            top: offset1.top + $box4.outerHeight() - parseInt($box.css('border-top-width'), 10) - offset2.top,

            left: offset1.left - parseInt($box.css('border-left-width'), 10) - offset2.left,

            display: 'block'

        })

    </script>

</body>

</html>

♫【JS】offsetParent的更多相关文章

  1. 【js】appendChild

    appendChild主要是用来追加节点插入到最后:循环的时候由于不停的搬家导致length在改变.     使用for循环 <!Doctype html> <html xmlns= ...

  2. 【JS】AJAX跨域-被调用方与调用方解决方案（二）

    解决跨域问题 跨域问题说明,参考[JS]AJAX跨域-JSONP解决方案(一) 实例,使用上一章([JS]AJAX跨域-JSONP解决方案(一))的实例 解决方案三(被调用方支持跨域-服务端代码解决) ...

  3. 【js】Leetcode每日一题-制作m束花所需的最少天数

    [js]Leetcode每日一题-制作m束花所需的最少天数 [题目描述] 给你一个整数数组 bloomDay,以及两个整数 m 和 k . 现需要制作 m 束花.制作花束时,需要使用花园中 相邻的 k ...

  4. 【js】Leetcode每日一题-完成所有工作的最短时间

    [js]Leetcode每日一题-完成所有工作的最短时间 [题目描述] 给你一个整数数组 jobs ,其中 jobs[i] 是完成第 i 项工作要花费的时间. 请你将这些工作分配给 k 位工人.所有工 ...

  5. 【js】Leetcode每日一题-数组异或操作

    [js]Leetcode每日一题-数组异或操作 [题目描述] 给你两个整数,n 和 start . 数组 nums 定义为:nums[i] = start + 2*i(下标从 0 开始)且 n == ...

  6. 【js】Leetcode每日一题-解码异或后数组

    [js]Leetcode每日一题-解码异或后数组 [题目描述] 未知 整数数组 arr 由 n 个非负整数组成. 经编码后变为长度为 n - 1 的另一个整数数组 encoded ,其中 encode ...

  7. 【js】Leetcode每日一题-叶子相似的树

    [js]Leetcode每日一题-叶子相似的树 [题目描述] 请考虑一棵二叉树上所有的叶子,这些叶子的值按从左到右的顺序排列形成一个 叶值序列 . 举个例子,如上图所示,给定一棵叶值序列为 (6, 7 ...

  8. 【js】Leetcode每日一题-子数组异或查询

    [js]Leetcode每日一题-子数组异或查询 [题目描述] 有一个正整数数组 arr,现给你一个对应的查询数组 queries,其中 queries[i] = [Li, Ri]. 对于每个查询 i ...

  9. 【js】Leetcode每日一题-停在原地的方案数

    [js]Leetcode每日一题-停在原地的方案数 [题目描述] 有一个长度为 arrLen 的数组,开始有一个指针在索引 0 处. 每一步操作中,你可以将指针向左或向右移动 1 步,或者停在原地(指 ...

随机推荐

  1. 拿走不谢！22 个 Android Studio 优秀插件汇总

    Google 在2013年5月的I/O开发者大会推出了基于IntelliJ IDEA java ide上的Android Studio.AndroidStudio是一个功能齐全的开发工具,还提供了第三 ...

  2. 他们都没告诉你适配 Android N 需要注意什么

    还记得 6.0 对 Apache Http 库的废除导致的应用崩溃吗?还记得 6.0 中 MAC id 始终返回为空导致的唯一 id 混合生成算法大幅失效吗? 1. Android 中 Java 的实 ...

  3. svn 树冲突

    情况类似如下:(其中 removed_directory 是你工作的某个目录)  代码如下 复制代码 $svn statusD     C removed_directory>   local ...

  4. 各种语言HMAC SHA256实现

    语言包含: Javascript ,PHP,Java,Groovy,C#,Objective C,Go,Ruby,Python,Perl,Dart,Swift,Rust,Powershell. Jav ...

  5. 关于mssql数据库锁和事务隔离级别

    事务隔离级别有4种,这4种级别只是对于读操作,也就是select有不同程度的支持, 读未提交:不会对事务里读出来的数据附加任何锁 读已提交:会对事务里读出来的数据附加共享锁,读完就释放共享锁,其他事务 ...

  6. 在Mac OS上搭建本地服务器

    我们在做网络编程的时候一般是需要有网络环境的,这样可以边写边测试达到很高的效率.但有些时候我们由于很多原因我们的电脑无法连接到网络,这时就会感觉很不自在,所以今天在这里教大家怎么用自己电脑作服务器. ...

  7. SVN版本控制图标不显示的解决方法~

    新系统每次装了svn之后,过了一段时间,安装的软件一多就会出现这个问题,哎,收录一下解决方案! 输入:win+R,输入regedit,调出注册表信息,按下Ctrl+F,在注册表里搜索"She ...

  8. mysql锁死的现象判断

    一般发生表锁死这种低级问题,就有两种情况:1.程序员水平太菜,2.程序逻辑错误. 一旦发生系统会出现超时,关键是有可能你看不到正在活动的php进程,而系统的慢查询日志也不会记录,只能通过show fu ...

  9. WIN7下运行hadoop程序报：Failed to locate the winutils binary in the hadoop binary path

    之前在mac上调试hadoop程序(mac之前配置过hadoop环境)一直都是正常的.因为工作需要,需要在windows上先调试该程序,然后再转到linux下.程序运行的过程中,报Failed to ...

  10. linux下gdal的python包的安装

    由于python包是从C++包编译出来的,所以需要先下载源码进行编译安装.1. gdal下载http://download.osgeo.org/gdal/CURRENT/sudo ./configur ...