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.)

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title></title>
  6. </head>
  7. <body>
  8.     <style>
  9.         *{margin:0;padding:0}
  10.         div{width:50%;padding:20px;border:5px solid green}
  11.         #box1{position:relative}
  12.         #box4{position:absolute;display:none;border-color:red}
  13.     </style>
  14.     <div id="box1">
  15.         <div id="box2">
  16.             <div id="box3">
  17.                 <div id="box4"></div>
  18.             </div>
  19.         </div>
  20.     </div>
  21.     <script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.3.min.js"></script>
  22.     <script>
  23.         var $box3 = $('#box3')
  24.         var $box4 = $('#box4')
  25.         $box4.css({visibility:'hidden',display:'block'})
  26.  
  27.         var $box = $box4.offsetParent()
  28.         // or
  29.         var $box = $(document.getElementById('box4').offsetParent)
  30.  
  31.         $box4.css({visibility:'',display:'none'})
  32.         var offset1 = $box3.offset()
  33.         var offset2 = $box.offset()
  34.         $box4.css({
  35.             top: offset1.top + $box4.outerHeight() - parseInt($box.css('border-top-width'), 10) - offset2.top,
  36.             left: offset1.left - parseInt($box.css('border-left-width'), 10) - offset2.left,
  37.             display: 'block'
  38.         })
  39.     </script>
  40. </body>
  41. </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. Eclipse的修改编码插件使用

    最近因为编码问题,很是纠结,终于找到了一个Eclipse的修改编码插件com.lifesting.tool.encoding_1.0.0.jar,使用感觉还不错,记录一下使用方法. 第一步 将插件co ...

  2. android开发之broadcast学习笔记 分类： android 学习笔记 2015-07-19 16:33 32人阅读 评论(0) 收藏

    android中的广播用的太多了,今天稍微总结一下. 按注册方式分为两种: 1.静态注册广播: 静态注册广播就是在androidManifest.xml文件中注册广播,假设我们要实现这样一个效果,在一 ...

  3. Android Studio快速生成get set等函数

    方式一:Code-->Generate 方式二:通过快捷键Alt+Insert

  4. iOS UIKit：viewController之Present (3)

    弹出和转换view controller技术是一种快速且简单的方式将新view content展示在屏幕中.目前有两种方式弹出新的view controller:Present方式和segues方式. ...

  5. unlocker208安装之后看不到Apple macos选项,解决办法.

    前段时间升级了win10,最新的unlocker208安装以后看不到mac os的选项,为什么呢?我们在管理员允许win-install.cmd的过程中,会在cmd中看到这么一句话:LookupErr ...

  6. linux的openfire运行日志配置经历

    openfire的日志可以通过/usr/openfire/lib/log4j.xml(与openfire的安装目录有关,我的openfire是安装在/usr/openfire/)的xml配置文件进行设 ...

  7. sql 减去分钟

    SQL SERVER:SELECT DATEADD( minute,-10,GETDATE()) ORACLE:SELECT to_char(sysdate -interval '10' minute ...

  8. ubuntu JDK

    第一步:下载jdk-7-linux-i586.tar.gz 第二步:解压安装 cd /usr/libsudo mkdir jvm cd {你的目录jdk压缩文件目录} sudo tar zxvf jd ...

  9. JSONModel的基本使用

    JSONModel 是一个库,它能智能并且快速的创建出数据 model,你可以在你的 iOS 项目或者 OSX 项目上使用它. 使用前准备 添加 JSONModel 到你的工程中 1.需要的环境: A ...

  10. AFN的坑--NSCachedURLResponse缓存

    网络正常的情况下,如果服务器宕机或者数据库出错,会造成访问服务器报错的情况,一般报错的内容是:无法连接到服务器或者其它错误.且服务器 修复后,仍然报错.经过排查,终于找出了原因所在:AFNetwork ...