关于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![](/Images/OutliningIndicators/None.gif)
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![](/Images/OutliningIndicators/None.gif)
80![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
2
![](/Images/OutliningIndicators/None.gif)
3
![](/Images/OutliningIndicators/None.gif)
4
![](/Images/OutliningIndicators/None.gif)
5
![](/Images/OutliningIndicators/None.gif)
6
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
7
![](/Images/OutliningIndicators/InBlock.gif)
8
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
9
![](/Images/OutliningIndicators/InBlock.gif)
10
![](/Images/OutliningIndicators/InBlock.gif)
11
![](/Images/OutliningIndicators/InBlock.gif)
12
![](/Images/OutliningIndicators/InBlock.gif)
13
![](/Images/OutliningIndicators/InBlock.gif)
14
![](/Images/OutliningIndicators/InBlock.gif)
15
![](/Images/OutliningIndicators/InBlock.gif)
16
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
17
![](/Images/OutliningIndicators/InBlock.gif)
18
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
19
![](/Images/OutliningIndicators/InBlock.gif)
20
![](/Images/OutliningIndicators/InBlock.gif)
21
![](/Images/OutliningIndicators/InBlock.gif)
22
![](/Images/OutliningIndicators/InBlock.gif)
23
![](/Images/OutliningIndicators/InBlock.gif)
24
![](/Images/OutliningIndicators/InBlock.gif)
25
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
26
![](/Images/OutliningIndicators/InBlock.gif)
27
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
28
![](/Images/OutliningIndicators/InBlock.gif)
29
![](/Images/OutliningIndicators/InBlock.gif)
30
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
31
![](/Images/OutliningIndicators/InBlock.gif)
32
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
33
![](/Images/OutliningIndicators/InBlock.gif)
34
![](/Images/OutliningIndicators/InBlock.gif)
35
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
36
![](/Images/OutliningIndicators/InBlock.gif)
37
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
38
![](/Images/OutliningIndicators/InBlock.gif)
39
![](/Images/OutliningIndicators/InBlock.gif)
40
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
41
![](/Images/OutliningIndicators/InBlock.gif)
42
![](/Images/OutliningIndicators/InBlock.gif)
43
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
44
![](/Images/OutliningIndicators/InBlock.gif)
45
![](/Images/OutliningIndicators/InBlock.gif)
46
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
47
![](/Images/OutliningIndicators/None.gif)
48
![](/Images/OutliningIndicators/None.gif)
49
![](/Images/OutliningIndicators/None.gif)
50
![](/Images/OutliningIndicators/None.gif)
51
![](/Images/OutliningIndicators/None.gif)
52
![](/Images/OutliningIndicators/None.gif)
53
![](/Images/OutliningIndicators/None.gif)
54
![](/Images/OutliningIndicators/None.gif)
55
![](/Images/OutliningIndicators/None.gif)
56
![](/Images/OutliningIndicators/None.gif)
57
![](/Images/OutliningIndicators/None.gif)
58
![](/Images/OutliningIndicators/None.gif)
59
![](/Images/OutliningIndicators/None.gif)
60
![](/Images/OutliningIndicators/None.gif)
61
![](/Images/OutliningIndicators/None.gif)
62
![](/Images/OutliningIndicators/None.gif)
63
![](/Images/OutliningIndicators/None.gif)
64
![](/Images/OutliningIndicators/None.gif)
65
![](/Images/OutliningIndicators/None.gif)
66
![](/Images/OutliningIndicators/None.gif)
67
![](/Images/OutliningIndicators/None.gif)
68
![](/Images/OutliningIndicators/None.gif)
69
![](/Images/OutliningIndicators/None.gif)
70
![](/Images/OutliningIndicators/None.gif)
71
![](/Images/OutliningIndicators/None.gif)
72
![](/Images/OutliningIndicators/None.gif)
73
![](/Images/OutliningIndicators/None.gif)
74
![](/Images/OutliningIndicators/None.gif)
75
![](/Images/OutliningIndicators/None.gif)
76
![](/Images/OutliningIndicators/None.gif)
77
![](/Images/OutliningIndicators/None.gif)
78
![](/Images/OutliningIndicators/None.gif)
79
![](/Images/OutliningIndicators/None.gif)
80
![](/Images/OutliningIndicators/None.gif)
(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那不是更好,更是我们想要看到的?
不如各高手有何解决的方法呢??