了解offsetParent

一点小小的心得，如有错误敬请指出，共勉。

1.当有定位父级时，则offsetParent是指当前元素最近的一个定位父级

2.在没有定位父级

（1）自身没有定位的情况下，各浏览器默认的offsetParent指body

（2）自身有定位的情况下，ie7、ie6默认默认的offsetparent指html

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>offsetTop</title>
 6     <style>
 7 
 8 body{
 9     margin: 0;
10     padding: 0;
11 }
12 
13 
14         #div1{
15             margin: auto;
16              padding: 20px;
17             background: blueviolet;
18         }
19         #div2{
20             padding: 30px;
21             background: yellow;
22         }
23         #div3{
24             padding: 40px;
25             background: salmon;
26             position: relative;//定位
27         }
28     </style>
29     <script>
30         window.onload=function () {
31             var div=document.getElementsByTagName('div');
32 
33             //div2没有定位
34             alert(div[1].offsetParent.id);//myBody
35 
36             //div3有定位
37             alert(div[2].offsetParent.id);//myBody     (ie6/7下为空)
38             alert(div[2].offsetParent.tagName);//body （ie6/7下为  html）
39         }
40     </script>
41 </head>
42 <body id="myBody">
43 <div id="div1">
44         <div id="div2">
45             <div id="div3"></div>
46     </div>
47 </div>
48 </body>
49 </html>

 

posted @ 2016-08-01 17:58  楚秦  Views(118)  Comments(0)    收藏  举报