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. rabbitMQ实战(一)---------使用pika库实现hello world

    rabbitMQ实战(一)---------使用pika库实现hello world 2016-05-18 23:29 本站整理 浏览(267)     pika是RabbitMQ团队编写的官方Pyt ...

  2. StructureMap Exception Code: 207 Internal exception while creating Instance '06fc8bd7-76db-47c1-8d71-31090a074f5e' of PluginType QIMS.Repository.IComStaffRepository. Check the inner exception for more

    标题翻译: StructureMap异常代码:207内部异常,同时创造PluginType QIMS.Repository.IComStaffRepository的实例“06fc8bd7-76db-4 ...

  3. CSS样式权值

    内联样式表(InLine style)>内部样式表(Internal style sheet)>外部样式表(External style sheet) 例外:但如果外部样式表放在内部样式表 ...

  4. MVC打包压缩JS&CSS文件调试时过滤了一些文件

    BundleTable.这个确实是比较好用,打包并压缩了CSS,使之加载时减少流量. 但是在调试的时候会疑问为何有很多JS,CSS文件无法打包,其实是因为调试时VS自动过滤了如下文件:   后台跟踪了 ...

  5. js实现图片自动切换效果。

    js实现图片自动切换效果,简单实用,原谅我只是一只小菜鸟还在学大神天天写博文装逼. <script language="javascript"> setInterval ...

  6. jar包的生成及运行

    Hello, 大家好,我们见面了,今天是2015年7月30日,我在青岛,你好吗? 这里总结下刚学习到的jar包的生成和运行,网上的资料一搜一大片,我这里总结下适用的 一:jar包的生成: 1:命令行, ...

  7. java 进制.

    /* 整数的'3'种表现形式: 1,十进制. 2,八进制. 3,十六进制. */ public class IntegerDemo { public static void main(String[] ...

  8. Java学习随笔——RMI

    RMI(Remote Method Invocation)远程方法注入,用来实现远程方法调用,是实现分布式技术的一种方法.RMI提供了客户辅助对象和服务辅助对象,为客户辅助对象创建了和服务对象相同的方 ...

  9. 为什么我们不喜欢用富UI控件

    我们对于理解一般意义的抽象关系并没有问题,但如第一部分使用Entity Framework 时说明的,事实恰好相反.我们还喜欢在交付应用程序时利用抽象关系,比如使用Azure等云服务.在这两种情况下, ...

  10. Mvvm绑定datagrid或listview的selectItems的方法[转]

    单选,很简单,将SelectedItem与ViewModel的属性进行双向绑定就OK了 多选,由于ListView的SelectedItems不能进行绑定,需要将ListView的SelectionC ...