parentNode different immediate parent // and 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. the type comprising a bit block (of the concept css) in css concept
b.offsetLeft offsetTop and are referenced to boundaries offsetParent of padding
c. Rule (margin between the body and cleared html)
Positioning itself as fiexd, whether you have not positioned parent
Compatibility issues
offsetParent Firefox -> body
Non-Firefox 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 = of the type " text / JavaScript " > / * EV || event mouse wheel event binding the offsetParent 1. if the parent positioning (four kinds) 2.It is positioning itself (four kinds) 3.The browser is not the same (five pc browser + ancestors (ie 6 7 8)) 4 * 4 * 8 = 128 itself is positioned fixed ==> the offsetParent: null (not Firefox) ==> offsetParent: body (Firefox) itself is not fixed positioned parent is not positioned ==> offsetParent: body parent positioning = => offsetParent: positioning a parent * / the window.onload = function () { the console.log (inner3.offsetParent) } </ Script> </ HTML>
Non-fixed
parent is not located
offsetParent -> body
parent positioning
offsetParent -> locate the parent
Whether you have no fixed positioning are based on 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 mouse wheel event binding the offsetParent 1. if the parent positioning (four kinds) 2. Are positioning itself (four kinds) 3. The browser is not the same (five pc browser + ancestors (ie 6 7 8 )) 4 * 4 * 8 = 128 itself is positioned Fixed ==>offsetParent: null (not Firefox) ==> offsetParent: body (Firefox) itself is not fixed positioned parent is not positioned ==> offsetParent: body parent positioning ==> offsetParent: positioning a parent * / the window.onload = function () { the 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{ width: 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 ==> the offsetParent: null (not Firefox)"> inner3 </ div> </ div> </ div> </ div> </ body> <Script of the type = " text / JavaScript " > / * * EV || Event mouse wheel event binding the offsetParent 1. if the parent positioning (four kinds) 2. is positioning itself (four kinds) 3. The browser is not the same (five pc + ancestors browser (IE. 7. 8. 6)) . 4. 4 *. 8 * = 128 itself is positioned Fixed offsetTop and are referenced to the body of offsetLeft ==> offsetParent: body (Firefox) itself is not fixed positioned parent is not positioned ==> offsetParent: body parent positioning ==> offsetParent: positioning a parent * / the window.onload = function () { the console.log (inner3.offsetTop, inner3.offsetLeft) } </ Script> </ HTML>