offsetParent 深度解析

根据其自身定位情况与父节点的标签类型与定位情况,分为以下二十种情况(IE8, chrome23, opera12的结果):

没有已定位的父节点,且自身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元素
我们可以总结以下几条规律:

a) position为fixed元素是没有offsetParent,但firefox统一返回body。
b) position为absolute, relative的元素的offsetParent总是为其最近的已定位的元素,没有找最近的td,th元素,再没有找body。
c) position为static的元素的offsetParent则是先找最近的td,th元素,再没有找body。
d) body为最顶层的offsetParent。

猜你喜欢

转载自blog.csdn.net/weixin_43545329/article/details/84833480