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. Matlab使用xlsread, xlswrite函数导致excel进程无法终止的问题

    系统版本:Win7 64位 Matlab版本:R2015b 问题描述:使用excel的操作函数,比如xlsread,xlswrite,导致excel进程无法终止,任务管理器中仍残留excel进程,打开 ...

  2. Android中的Adapter 详解

    http://blog.csdn.net/tianfeng701/article/details/7557819 (一) Adapter介绍 Android是完全遵循MVC模式设计的框架,Activi ...

  3. Android 巧妙实现图片和文字上下布局或者左右布局

    最近去了一家新公司,然后开始做新的项目,看其代码发现了一个很巧妙的方法来实现图片在上面文字在下面的布局方式.只需要一个控件——RadioButton. 布局文件很简单,用来展示RadioBUtton的 ...

  4. Nginx和Apache共存环境下apache获得真实IP

    自从Nginx出现以后,我们都喜欢让 Nginx 跑在前方处理静态文件,然后通过 proxy 把动态请求过滤给 apache.这么有个问题,跑在后方 apache 上的应用获取到的IP都是Nginx所 ...

  5. UIViewAnimationOptions类型

    一个非常强大的博客 http://www.cnblogs.com/kenshincui/    像我这种新手确实应该多看看   常规动画属性设置(可以同时选择多个进行设置) UIViewAnimati ...

  6. OSG 安装配置

    对于普通用户推荐直接下载安装包配置.如有特殊需求或想了解编译过程可参考网上文章自己编译后配置.(通常建议使用第一种方法即可) 本人安装经验: 失败:自己系统64位,VS2010 32位,开始自己动手编 ...

  7. stat 的名字接口

    File::stat - stat 的名字接口 名字为:dev, ino, mode, nlink, uid, gid, rdev, size, atime, mtime, ctime, blksiz ...

  8. SWFUpload（转载）

    网上的例子介绍的文档真的很多.下面简单介绍一下 SWFUpload的文件上传流程是这样的: 1.引入相应的js文件 2.实例化SWFUpload对象,传入一个配置参数对象进行各方面的配置. 3.点击S ...

  9. sed 简明教程

    做个标记 http://coolshell.cn/articles/9104.html sed全名叫stream editor,流编辑器,用程序的方式来编辑文本,相当的hacker啊.sed基本上就是 ...

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

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