关于position在各浏览中的表现问题

来源：互联网发布：淘宝卖家早点收到货款编辑：程序博客网时间：2024/06/11 14:31

关于css中的position在各大浏览器（IE,FireFox,Opera）中表现问题：

第一种情况：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

#div-1

{

position:relative;

top:0px;

left:150px;

background:#CC9933;

border:1px solid #66FF66;

width:400px;

height:300px;

}

#div-1a

{

position:absolute;

top:0;

left:0;

width:100px;

height:600px;

background:#9999FF;

}

.autoCenter

{

margin:0 auto;

border:1px solid #6595d6;

}

.clearBoth

{

height:1px;

clear:both;

}

.divFather

{

height:400px; overflow:scroll;border:2px solid #ccc;

width:600px;

}

.divA

{

position:relative;

}

</style>

</head>

<br />

</div>

</div>

</div>

<!--

this is div-1a element.

</div>

this is div-1 element.

</div>

-->

</body>

</html>

(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那不是更好，更是我们想要看到的？

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