现在的位置: 首页 > 综合 > 正文

offsetParent算法分析

2012年03月01日 ⁄ 综合 ⁄ 共 8124字 ⁄ 字号 评论关闭

根据其自身定位情况与父节点的标签类型与定位情况,分为以下二十种情况(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。

posted on 2012-10-30 17:42 司徒正美 阅读(...) 评论(...) 编辑 收藏

根据其自身定位情况与父节点的标签类型与定位情况,分为以下二十种情况(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。

抱歉!评论已关闭.