parentNode 直接父级//和offsetParent不同
inner2.parentNode
<!DOCTYPE html> <html id="html"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #inner2{ position: absolute; } #wrap{ position: relative; } </style> </head> <body id="body"> <div id="wrap">wrap <div id="inner1">inner1 <div id="inner2">inner2</div> </div> </div> </body> <script type="text/javascript"> //hmtl css js window.onload=function(){ //parentNode 直接父级 var inner2 = document.querySelector("#inner2"); console.log(inner2.parentNode.id); } </script> </html>
offsetParent
a.有点类型于css中包含块（css中的概念）的概念
b.offsetLeft 和 offsetTop都是参照于offsetParent的内边距边界
c.规则（html和body之间的margin被清除）
本身定位为fiexd，不管你父级有没有定位
存在兼容性问题
火狐的offsetParent --> body
非火狐offsetParent --> null
<!DOCTYPE html> <html id="html"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #wrap{position: absolute;} #inner1{position: fixed;} #inner2{position: relative;} #inner3{position: fixed;} </style> </head> <body id="body"> <div id="wrap">wrap <div id="inner1">inner1 <div id="inner2">inner2 <div id="inner3">3</div> </div> </div> </div> </body> <script type="text/javascript"> /* ev||event 鼠标滚轮 事件绑定 offsetParent 1.父级是否有定位(4种) 2.本身是否有定位(4种) 3.浏览器不一样(5大pc浏览器+老祖宗(ie 6 7 8)) 4*4*8 = 128 本身定位为fixed ==> offsetParent:null（不是火狐） ==> offsetParent:body（火狐） 本身定位不为fixed 父级没有定位 ==> offsetParent:body 父级有定位 ==> offsetParent:定位父级 */ window.onload=function(){ console.log(inner3.offsetParent) } </script> </html>
非fixed
父级没有定位
offsetParent --> body
父级有定位
offsetParent --> 定位父级
fixed 不管你有没有定位都根据body
<meta charset="UTF-8"> <title></title> <style type="text/css"> #wrap{position: absolute;} #inner1{position: fixed;} #inner2{position: relative;} #inner3{position: fixed;} </style> </head> <body id="body"> <div id="wrap">wrap <div id="inner1">inner1 <div id="inner2">inner2 <div id="inner3"></div> </div> </div> </div> </body> <script type="text/javascript"> /* ev||event 鼠标滚轮 事件绑定 offsetParent 1.父级是否有定位(4种) 2.本身是否有定位(4种) 3.浏览器不一样(5大pc浏览器+老祖宗(ie 6 7 8)) 4*4*8 = 128 本身定位为fixed ==> offsetParent:null（不是火狐） ==> offsetParent:body（火狐） 本身定位不为fixed 父级没有定位 ==> offsetParent:body 父级有定位 ==> offsetParent:定位父级 */ window.onload=function(){ console.log(inner3.offsetParent) } </script> </html>
<!DOCTYPE html> <html id="html"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> html,body{ height: 100%; overflow: hidden; } #wrap{position: absolute;background: pink;left: 100px;top: 50px;} #inner1{position: fixed;background: deeppink;left: 50px;top: 150px;} #inner2{position: relative;background: hotpink;left: 80px;top: 70px;} #inner3{position: fixed;background: yellow;left: 60px;top: 30px;} div{ 200px; height: 200px; padding: 50px; border: 10px solid; } </style> </head> <body id="body"> <div id="wrap">wrap <div id="inner1">inner1 <div id="inner2">inner2 <div id="inner3">inner3</div> </div> </div> </div> </body> <script type="text/javascript"> /* * ev||event 鼠标滚轮 事件绑定 offsetParent 1.父级是否有定位(4种) 2.本身是否有定位(4种) 3.浏览器不一样(5大pc浏览器+老祖宗(ie 6 7 8)) 4*4*8 = 128 本身定位为fixed ==> offsetParent:null（不是火狐） offsetTop和offsetLeft也是参照于body的 ==> offsetParent:body（火狐） 本身定位不为fixed 父级没有定位 ==> offsetParent:body 父级有定位 ==> offsetParent:定位父级 */ window.onload=function(){ console.log(inner3.offsetTop,inner3.offsetLeft) } </script> </html>