offsetParent 到底是哪一个？

前言

温故而知新。遇到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算法分析

转载于:https://www.cnblogs.com/ahole/p/5558528.html