[转] 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的情况下。所以很好记得。

原文地址:https://www.cnblogs.com/chris-oil/p/6662254.html