关于css中的position在各大浏览器（IE,FireFox,Opera）中表现问题
关于css中的position在各大浏览器（IE,FireFox,Opera）中表现问题：
第一种情况：
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
5<title>无标题文档</title>
6
<style type="text/css">
7
#div-1
8
{
9 position:relative;
10 top:0px;
11 left:150px;
12 background:#CC9933;
13 border:1px solid #66FF66;
14 width:400px;
15 height:300px;
16
}
17 #div-1a
18 {
19 position:absolute;
20 top:0;
21 left:0;
22 width:100px;
23 height:600px;
24 background:#9999FF;
25 }
26 .autoCenter
27 {
28 margin:0 auto;
29 border:1px solid #6595d6;
30 }
31 .clearBoth
32 {
33 height:1px;
34 clear:both;
35 }
36 .divFather
37 {
38 height:400px; overflow:scroll;border:2px solid #ccc;
39 width:600px;
40 }
41
42 .divA
43 {
44 position:relative;
45
46
}
47</style>
48</head>
49
50<body scroll="no" >
51<br />
52<br />
53<div class="divFather">
54<div id="div-1">
55 <p>d </p>
56 <p>dfd</p>
57</div>
58<div id="div-1a"> df</div>
59<div class="clearBoth"></div>
60<div class="autoCenter">
61 <p>d</p>
62 <p> </p>
63</div>
64<div class="autoCenter">
65 <p>d</p>
66 <p> </p>
67</div>
68</div>
69<!--
70<div id="div-1" class="divFather">
71<div id="div-1a">
72this is div-1a element.
73</div>
74this is div-1 element.
75</div>
76-->
77</body>
78</html>
79
80
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2
<html xmlns="http://www.w3.org/1999/xhtml">3
<head>4
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />5
<title>无标题文档</title>6
<style type="text/css">
7
#div-18
{
9
position:relative;10
top:0px;11
left:150px;12
background:#CC9933;13
border:1px solid #66FF66;14
width:400px;15
height:300px;16
}17
#div-1a18
{19
position:absolute; 20
top:0;21
left:0;22
width:100px;23
height:600px;24
background:#9999FF;25
}26
.autoCenter27
{28
margin:0 auto; 29
border:1px solid #6595d6;30
}31
.clearBoth32
{33
height:1px;34
clear:both;35
}36
.divFather37
{38
height:400px; overflow:scroll;border:2px solid #ccc;39
width:600px;40
}41
42
.divA43
{44
position:relative;45
46
}47
</style>48
</head>49
50
<body scroll="no" >51
<br />52
<br />53
<div class="divFather">54
<div id="div-1">55
<p>d </p>56
<p>dfd</p>57
</div>58
<div id="div-1a"> df</div>59
<div class="clearBoth"></div>60
<div class="autoCenter">61
<p>d</p>62
<p> </p>63
</div>64
<div class="autoCenter">65
<p>d</p>66
<p> </p>67
</div>68
</div>69
<!--70
<div id="div-1" class="divFather"> 71
<div id="div-1a"> 72
this is div-1a element. 73
</div> 74
this is div-1 element. 75
</div>76
-->77
</body>78
</html>79
80
(1)、IE中解释良好，ID为div-1的元素如期在其容器类名为divFather中，相对固定在某一个位置，通过这个功能做固定表头效果非常的方便。
(2)、而ID为div-1的元素在Opera和和FireFox中它会随着滚动条的而滚动，也就是说起不到relative 的作用。
第二种情况：
我们将修改#div-1中的heigth属性，让它的高度高于其容器.divFather时，发现这时IE的解析与我想象中的不同
(1)、在IE中ID为div-1的元素突破了其容器而显示在外部，也就是说position:relative;中起不到相对于其容器的位置，而是相对于浏览器也就是窗口，在IE中设置position为relative时它与任何的元素是没有关联的，它的位置在哪也也不会影响到任何元素的布局。
(2)、Opera和FireFox中解析则不同，尽管position设为relative但它也只显示到其容器中。
来到这里我就想如果像第一种情况时浏览器解析得像IE，而在第二种情况解析得像Opera或FireFox那不是更好，更是我们想要看到的？
不如各高手有何解决的方法呢？？
