说下relative、absolute和float
CSS #relative #absolute #float2012-07-12 11:53
position:relative和position:absolute都可以改变元素在文档中的位置，都能激活元素的left、top、right、bottom和z-index属性。（默认这些属性未激活，设置了也无效）
设置position:relative和position:absolute都会让元素浮起来，会改变正常情况下的文档流。
不同：position:relative会保留自己在z-index:0层的占位，left、top、right、bottom值是相对于自己在z-index层的位置。
position:absolute会完全脱离文档流，不再z-index:0层保留占位符，其left、top、right、bottom值是相对于自己最近的一个设置了position:relative或position:absolute的祖先元素的，如果祖先元素全都没有设置，那么就相对于body元素。
float也能改变文档流，不同的是，float不会让元素浮到另一个元素上面，它仍然让元素在z-index:0层排列，只能通过float:left和float:right来控制元素在同一层里"左浮"和"右浮"。float会改变正常的文档流排列，影响周围元素。position:absolute和float会隐式的改变display类型，不论之前什么类型的元素（display:none除外）,只要设置了position:absolute和float中任何一个，都会让元素以display:inline-block的方式显示：可以设置长宽，默认宽度并不占满父元素。就算显示的设置display:inline或者display:block，也仍然无效（IE6双倍边距BUG利用display:inline解决）。
position:relative却不会隐式改变display类型。
相关文章
- 说下display:inline-block 2012/07/12
- CSS3实现圆角 2012/07/12
- CSS中float用法介绍 2012/07/10
- IE中的BUG之margin-bottom失效 2012/06/29
- 超链接a标签去掉虚线框/虚线/去除虚线框 2012/06/14
- css非标准的ime-mode属性 2012/05/19
- 写css伪类时冒号前或后多个空格导致该规则失效 2012/05/19
- Div+CSS布局技巧 2012/04/28
- 常用的CSS知识 2012/04/26
- DIV+CSS网页布局常用的方法 2012/04/26