奇妙的relative和 absolute及float属性

在网页中relative,absolute和float这三个属性用处非常广，不论是滚动的banner，还是能够切换的选项卡都会有relative,absolute和float这三个属性当中的一个。下面就分别来看看它们之间的区别：

position：relative和position：absolute都可以改变元素在文档流中的位置，并且都可以让元素激活left、top、right、bottom和z-index属性。（默认情况下，这些属性未激活，设置了也无效）。网页虽然看起来是平面的二维结构，但它其实是有z轴的，z轴的大小由z-index控制，默认情况下，所有元素都是在z-index：0这一层的。元素根据自己的display类型、长宽、内外边距等属性顺序排列在z-index：0这一层里，这就是文档流。设置position：relative或position：absolute会让元素“浮”起来，也就是z-index值大于0，它会改变正常情况下的文档流。不同的是position：relative会保留自己在z-index:0层的占位，left、top、right、bottom值是相对于自己在z-index:0层的位置，虽然它的实际位置可能因为设置了left、top、right、bottom值而偏离原来在文档流中的位置，但对其他仍然在z-index：0层的元素位置不会造成影响。而position：absolute会完全脱离文档流，不再在z-index：0层保留占位符，其left、top、right、bottom值是相对于自己最近的一个设置了position：relative或position：absolute的祖先元素的，如果祖先元素全都没有设置position：relative或position：absolute,那么就相对于body元素。

除了上面的定位属性外，float也能改变文档流，不同的是，float属性不会让元素“上浮”到另一个z-index层，它仍然让元素在z-index：0层排列，float不像定位属性那样，它不通过left、top、right、bottom属性精确地控制元素的坐标，它只能通过float：left和float：right来控制元素在同层里“左浮动”和“右浮动”。float会改变正常的文档流排列，影响到周围元素。

另一方面绝对定位属性和浮动属性会隐式地改变display类型，不论之前什么类型的元素（display：none除外），只要设置了绝对定位或浮动，都会让元素以display：inline-block的方式显示：可以设置长宽，默认宽度并不占满父元素。就算我们显示地设置display：inline或display：block，也仍然无效。要注意相对定位不会隐式改变display的类型。