前言

温故而知新。遇到offsetParent这个知识点，发现书上讲的不够详细。于是看了看豪情的博客，发现讲得很具体，收藏一下。

正文

不同情况

• 没有已定位的父节点，且自身position:relative的DIV元素的offsetParent为BODY
• 没有已定位的父节点，且自身position: absolute的DIV元素的offsetParent为BODY
• 没有已定位的父节点，且自身position: fixed的DIV元素的offsetParent为BODY
• 没有已定位的父节点，且自身position: static的DIV元素的offsetParent为BODY
• 拥有一个已定位的父节点，且自身position:
  relative的DIV元素的offsetParent为其最近被定位的祖先
• 拥有一个已定位的父节点，且自身position:
  absolute的DIV元素的offsetParent为其最近被定位的祖先
• 拥有一个已定位的父节点，且自身position: fixed的DIV元素的offsetParent为BODY
• 拥有一个已定位的父节点，且自身position:
  static的DIV元素的offsetParent为其最近被定位的祖先
• 在table之内，td与table都没有定位，且自身position:
  relative的DIV元素的offsetParent为BODY
• 在table之内，td与table都没有定位，且自身position:
  absolute的DIV元素的offsetParent为BODY
• 在table之内，td与table都没有定位，且自身position:
  fixed的DIV元素的offsetParent为BODY
• 在table之内，td与table都没有定位，且自身position:
  static的DIV元素的offsetParent为其最近的TD、TH元素
• 在table之内，td相对定位，且自身position:
  relative的DIV元素的offsetParent为其最近的TD、TH元素
• 在table之内，td相对定位，且自身position: absolute的DIV元素的offsetParent为BODY
• 在table之内，td相对定位，且自身position: fixed的DIV元素的offsetParent为BODY
• 在table之内，td相对定位，且自身position:
  static的DIV元素的offsetParent为其最近的TD、TH元素
• 在table之内，table相对定位，且自身position:
  relative的DIV元素的offsetParent为其最近的TABLE元素
• 在table之内，table相对定位，且自身position:
  absolute的DIV元素的offsetParent为其最近的TABLE元素
• 在table之内，table相对定位，且自身position: fixed的DIV元素的offsetParent为BODY
• 在table之内，table相对定位，且自身position:
  static的DIV元素的offsetParent为其最近的TD、TH元素

总结

1. position为fixed元素是没有offsetParent，但firefox统一返回body。
2. position为absolute, relative的元素的offsetParent总是为其最近的已定位的元素,
   没有找最近的td,th元素，再没有找body。
3. position为static的元素的offsetParent则是先找最近的td,th元素，再没有找body。
4. body为最顶层的offsetParent。

个人观点

用的比较多的是在没有table的情况下。所以很好记得。

原文地址

offsetParent算法分析

最新文章

1. [未完成]scikit-learn一般实例之九:用于随机投影嵌入的Johnson–Lindenstrauss lemma边界
2. asp.net MVC 应用程序的生命周期
3. 【PRINCE2是什么】PRINCE2认证之七大原则（2）
4. [原创翻译]Protocol Buffer Basics: C#
5. 初识reactJs 相关
6. WinForm中DataGridView显示更新数据--人性版
7. P2342 叠积木
8. 垃圾回收算法手册：自动内存管理的艺术 BOOK
9. 【video】m3u8
10. pl_sql 报ora-12154 无法解析指定的连接标识符的问题
11. Oracle EBS-SQL (INV-11):检查子库存会计信息.sql
12. SQL Server 如何读写数据
13. 迈向angularjs2系列(3):组件详解
14. beam 的异常处理 Error Handling Elements in Apache Beam Pipelines
15. unity发布的WebGL部署到IIS
16. mininet的学习之二-----miniedit可视化
17. linux批量替换文本字符串
18. WebSocket和long poll、ajax轮询的区别，ws协议测试
19. vs2013安装及opencv3.0的配置
20. git 合并多个commit

热门文章

1. 几家SIEM
2. 获取EIP（汇编语言直接给Delphi变量赋值）
3. Protection 5 ---- Priviliege Level Checking 2
4. [Leetcode][Python]29: Divide Two Integers
5. [置顶] C# WINCE调节屏幕亮度
6. 面向对象程序设计-C++_课时13初始化列表
7. JavaScript值延迟脚本和异步脚本
8. 全球最快的JS模板引擎
9. ToDoList-学习中看到的知识盲点
10. 提供一段Excel获取Title的标题，类似于A、AA、AAA，我们操作Excel的时候通常根据次标题来获取一定的操作范围。