标签：des c style class blog code
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48 |
<!DOCTYPE html><head> <meta http-equiv="Content-Type"
content="text/html; charset=utf-8"
/> <title></title> <style type="text/css"> #div1 { width:400px;height:400px;background-color:red;position:relative;margin:100px; } #div2 { width:100px;height:100px;background-color:gray;position:absolute;left:200px;top:200px; } </style> <script type="text/javascript"> window.onload = function
() { var
oDiv1 = document.getElementById("div1"); var
oDiv2 = document.getElementById("div2"); alert(oDiv2.offsetParent); //如果div1有相对定位，则，div2根据div1定位，如果div1，没有相对定位，则div2根据body相对定位。可以去掉相对定位，看一下alert出来的内容的区别 } </script></head><body> <div>子类的position：absoulte;父类元素只有相对定位后，移动位置，子类才能跟着移动</div> <div id="div1"> <div id="div2"></div> </div> <!--//总结一下Dom节点 childNodes nodeType 元素节点的 nodeType=1 文本节点的 nodeType=3 使用的时候是 对象.childNodes[i].style.background=‘red‘; children 都是元素节点 children[i].style.background=‘red‘ parentNode parentNode.style.background="red" offsetPraent 获取元素在页面上的实际位置 <有兼容性问题>子节点 firstChild firstElementChild lastChild lastElemetnChild <有兼容性问题>兄弟节点 nextSiblings nextElementSiblings previousSiblings previousElementSiblings --></body></html> |
Javascript 绝对定位和相对定位,布布扣,bubuko.com
标签：des c style class blog code
原文地址：http://www.cnblogs.com/alphafly/p/3763868.html
