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元素
总结
- position为fixed元素是没有offsetParent,但firefox统一返回body。
- position为absolute, relative的元素的offsetParent总是为其最近的已定位的元素,
没有找最近的td,th元素,再没有找body。 - position为static的元素的offsetParent则是先找最近的td,th元素,再没有找body。
- body为最顶层的offsetParent。
个人观点
用的比较多的是在没有table的情况下。所以很好记得。