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. Java 国际化 语言切换

      Java国际化 我们使用java.lang.Locale来构造Java国际化的情境. java.lang.Locale代表特定的地理.政治和文化.需要Locale来执行其任务的操作叫语言环境敏感的 ...

  2. C# 日期字符串转成javascript日期

    1.c# date to js date var csharpStr='/Date(1479694396330)/'; //替换掉非数字 csharpStr=csharpStr.replace(/[^ ...

  3. Deep Learning 学习随记（五）Deep network 深度网络

    这一个多周忙别的事去了,忙完了,接着看讲义~ 这章讲的是深度网络(Deep Network).前面讲了自学习网络,通过稀疏自编码和一个logistic回归或者softmax回归连接,显然是3层的.而这 ...

  4. 不能错过的XCode插件

    以便自己记忆网上找的! 以下是搜集的一些有力的XCode插件. 全能搜索家CodePilot 2.0 你要找的是文件?是文件夹?是代码?Never Mind,CMD+SHIFT+X调出CodePilo ...

  5. JavaScript HTML DOM - 改变 HTML

    JavaScript HTML DOM - 改变 HTML HTML DOM 允许 JavaScript 改变 HTML 元素的内容. 改变 HTML 输出流 JavaScript 能够创建动态的 H ...

  6. JavaScript 保留关键字

    JavaScript 保留关键字 在 JavaScript 中,一些标识符是保留关键字,不能用作变量名或函数名. JavaScript 标准 所有的现代浏览器完全支持 ECMAScript 3(ES3 ...

  7. C#入门经典（第五版）学习笔记（二）

    ---------------函数---------------参数数组:可指定一个特定的参数,必须是最后一个参数,可使用个数不定的参数调用函数,用params关键字定义它们 例如: static i ...

  8. POJ 2942.Knights of the Round Table （双连通）

    简要题解: 意在判断哪些点在一个图的  奇环的双连通分量内. tarjan求出所有的点双连通分量,再用二分图染色判断每个双连通分量是否形成了奇环,记录哪些点出现在内奇环内 输出没有在奇环内的点的数目 ...

  9. 将fastjson元素转化为String[]

    在fastjson中如果JSONObject中添加了 String[] 类型的元素 例如 JSONObject jo = new JSONObject(); String[] array = {&qu ...

  10. js事件练习--登录界面演示。

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...