关于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 > &nbsp; </ p >
63 </ div >
64 < div  class ="autoCenter" >
65    < p > d </ p >
66    < p > &nbsp; </ 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
    {
        position:relative;
        top:0px;
        left:150px;
        background:#CC9933;
        border:1px solid #66FF66;
        width:400px;
        height:500px;
    }

我们将修改#div-1中的heigth属性，让它的高度高于其容器.divFather时，发现这时IE的解析与我想象中的不同
(1)、在IE中ID为div-1的元素突破了其容器而显示在外部，也就是说position:relative;中起不到相对于其容器的位置，而是相对于浏览器也就是窗口，在IE中设置position为relative时它与任何的元素是没有关联的，它的位置在哪也也不会影响到任何元素的布局。

(2)、Opera和FireFox中解析则不同，尽管position设为relative但它也只显示到其容器中。

来到这里我就想如果像第一种情况时浏览器解析得像IE，而在第二种情况解析得像Opera或FireFox那不是更好，更是我们想要看到的？

不如各高手有何解决的方法呢？？

本文转自Sam Lin博客园博客，原文链接：http://www.cnblogs.com/samlin/archive/2007/12/08/987992.html，如需转载请自行联系原作者