css实例问题:overflow:auto下position:relative的一些问题

   虽然，理论是可以一套又一套。但是，到了实战中，总会有些莫名其妙的问题，占用了你大量的时间。像Jquery 这样的框架，可以兼容各种各样的浏览器，可以非常完美的，简洁的进行编程。但是CSS 的设计没有这样简单，没有通用的解决方案。只能靠平时的点滴积累。

    虽然，作为一个开发人员，CSS不要求精通，但是，简单的了解了解还是有必要的。最近，遇到的这个问题很简单，可以用下面的例子来表示。

 

代码
<!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=utf-8" />

<style type="text/css">
#container {
   height:100px;
   border:1px solid blue;
   overflow:auto;
   width:300px;
}
#a {
   height:200px;
   background-color:blue;
   float:left;
   width:60px;
}
#b {
   position:relative;
   height:200px;
   background-color:pink;
   width:60px;
   float:left;
}
</style>
</head>

<body>
<div id="container">
    <div id="a"></div>
    <div id="b"></div>
    <div style="clear:both"></div>
</div>
</body>
</html>

你会发现，在ie6 ie7 上，粉色的部分，会超出来。在firefox下面，ie8下面是正常的。

解决的方案和很简单：

在overflow 所在的div 里面，加一个  position:relative; 就可以了。