对于position属性值absolute和relative的一点小测试
在开始小测试之前先来看看这两个属性值的定义：
CSS2.0 HandBook上的解释：
设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局。假如其他具有不同 z-index 属性的对象已经占据了给定的位置，他们之间不会相互影响，而会在同一位置层叠。此时对象不具有外补丁( margin )，但仍有内补丁( padding )和边框( border )。
要激活对象的绝对(absolute)定位，必须指定 left ， right ， top ， bottom 属性中的至少一个，并且设置此属性值为 absolute 。否则上述属性会使用他们的默认值 auto ，这将导致对象遵从正常的HTML布局规则，在前一个对象之后立即被呈递。
TRBL属性（TOP、RIGHT、BOTTOM、LEFT）只有当设定了position属性才有效。
当设定position:absolute
如果父级（无限）没有设定position属性，那么当前的absolute则结合TRBL属性以浏览器左上角为原始点进行定位
如果父级（无限）设定position属性，那么当前的absolute则结合TRBL属性以父级（最近）的左上角为原始点进行定位。
当设定position: relative
则参照父级（最近）的内容区的左上角为原始点结合TRBL属性进行定位（或者说相对于被定位元素在父级内容区中的上一个元素进行偏移），无父级则以BODY 的左上角为原始点。相对定位是不能层叠的。在使用相对定位时，无论元素是否进行移动，元素依然占据原来的空间。因此，移动元素会导致它覆盖其他框。
那么下面我们来通过代码来认识一下：
这里我们有两个绿色的div，里面分别有一个红色的小div
那么，下面我们给红的的div设置一下top和left属性
我们发现红div并没有移动，这是因为我们没有设置position属性，没有给它参照物，那么，我们给红色的div加上一个position:relative看看
我们发现两个红色的div都相对于它原来的位置偏移了，这正和上面定义说的relative是相对于自己原来的位置偏移一样
那么我们把position属性设置成absolute会是什么样的呢？
我们发现两个红色的div重叠到了一起，并且我们发现这两个红色的div可以独立的跳出绿色的div，这里我们就可以知道absolute这个值的参照物是同一个———屏幕左上角，也就是body标签。
那么就有一个问题，既然我们知道absolute这个值是单独拿出来排布的，也不占空间（因为relative只是对于原来的位置偏移，元素还是占据它原来的空间），那么我们有时候希望某些元素可以不占据空间但又能参照自己的父级元素进行定位时，我们该怎们办呢？
其实只要把父级元素的position设置成relative就可以了，我们来看下效果：
我们可以看到，红色的div已经是absolute了，但是它还是实现了同前面relative时一样的布局效果，并且它并没有占据体积，所以后面的蓝色的div可以很顺利地占据顶头的位置。
嗯嗯，大概要说的就这么多。。。。
额，最后，到了我提问题的时间了，代码如下：
红色的div是flout:left的，然后后面有一个蓝色的div，再然后clear掉了。
问题是，然后在chrome下，蓝色的div占站在了顶头的位置，也就是说chrome是先渲染了蓝色的div然后再把红色的div给clear了，而在IE6,7,8（IE9没测）下是先clear掉了红色的div之后，再渲染蓝色的div，也就是红色的div有了体积以后再渲染了蓝色的div，所以蓝色的div被挤开了。。。
希望前端大牛能帮我指点一下，正确的渲染和clear的顺序应该是什么样的？ 遇到这样的情况要怎么兼容？ 先谢谢啦~
把代码贴出来，你可以看看
Position Test .green{ width:600px; height:400px; background-color:green; border:1px yellow solid; _position:relative; } .red{ float:left; width:100px; height:100px; _position:absolute; background-color:red; } .blue{ width:200px; height:200px; _position:absolute; _z-index:-1; background-color:blue; }@偶然：看了一下，就是在IE下让蓝色块也脱离文档流再渲染。先谢过@偶然 {img:5}