深度剖析offsetParent、offsetTop、offsetLeft和ParentNode的区别
ParentNode:
是直接结构上的父级,并不是显示父级
offsetParent:
有点类似css包含块的概念,并不是包含块的实现,因为包含块是css里面的内容,offsetParent是js里面的内容,offsetLeft和offsetTop是参照offsetParent的内边距边界的。
offsetParent又分为如下几种:
1.父级是否有定位(4种)
2.本身是否有定位(4种)
3.浏览器不一样(5大pc浏览器+老祖宗(ie,7,8))
那么offsetParent一共4X4X8有128种,
如果body和HTML直接的margin被直接清理掉,可以总结为以下几种情况:
本身定位为fixed,
a.offsetParent:null(ie7以上(不是火狐))
b.offsetParent:body(火狐)
本身定位不为fixed,
a,父级没有定位:offsetParent:body
b.父级有定位:offsetParent:定位父级
Haslayout:
ie7以下,如果当前元素的某个父级触发了haslayout,那么offsetParent就会被指向到这个出发了layout特性的父节点上。
注意点:Dom里所有的元素都是有offsetLeft和offsetTop的,不仅仅是针对定位元素的。