本文探讨了CSS中position属性在不同浏览器（IE、Firefox、Opera）中的表现差异，特别是relative定位在滚动容器中的行为，以及当元素高度超过容器时的表现。
关于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"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title>
<style type="text/css">...
#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><body scroll="no" ><br /><br /><div class="divFather"><div id="div-1"> <p>d </p> <p>dfd</p></div><div id="div-1a"> df</div><div class="clearBoth"></div><div class="autoCenter"> <p>d</p> <p> </p></div><div class="autoCenter"> <p>d</p> <p> </p></div></div><!--<div id="div-1" class="divFather"> <div id="div-1a"> 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那不是更好，更是我们想要看到的？
不如各高手有何解决的方法呢？？
扫一扫
122
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
