relative、absolute、float

 position:relative和position:absolute都可以改变元素在文档流中的位置，设置postion:relative或position:relative都可以让元素激活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值是i相对于自己最近的一个设置了position：relative或position：absolute的祖先元素的，如果祖先元素全都没有设置position：relative或position：absolute，那么就是相对于body元素。

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

    另一个有趣的现象是position:absolute和float会隐式的改变display类型，不论之前是什么类型的元素（display：none除外），只要设置累position：absolute、float：right或float：left中任意一个，都会让元素以display：inline-block的方式显示：可以设置长宽，默认宽度并不占满父元素。就算我们显式地设置display：inline或者display：block，也仍然无效（float在IE6下的双边距bug就是利用添加display：inline来解决的）。值得注意的是，position：relative却不会隐式的改变display的类型。

    IE下的诡异问题大多与一个神秘的属性hasLayout相关。hasLayout是IE浏览器专有的一个属性，用于css的解析引擎。有时候再IE下一些复杂的css设置解析起来会出现bug，其原因可能与hasLayout没有被自动触发有关，通过一些技巧，手动触发hasLayout属性就可以解决bug了。

    hasLayout的触发方法有很多种，例如设置width、height值，设置position为relative等。但如果设置了width、height或position都会在触发hasLayout的同时带来一些副作用。早期的工程师推荐使用“height：1%”来触发hasLayout，那时还没有出现IE7，而height属性在IE6下其实是按照“min-height”来解析的，所以只要对IE6进行hack，“*html{height：1%}”就可以触发hasLayout，同时又带来副作用了。后来出现的IE7仍然存在很多hasLayout方面的问题看，但是IE7已经能够正确识别height属性了，而“heigth：1%”的方法已经不再适用了。

    于是，一个更好的解决方法开始流行，它适用了一个生僻的css属性zoom来触发hasLayout----“zoom：1”。“zoom：1”可以触发hasLayout，但并不会像height等属性那样引入副作用，更妙的是，我们可以不用css hack了。但“zoom：1”并不是一定可以触发hasLayout的，在极少数情况下，例如非常复杂的css设置，特别是适用DHTML的时候，适用“zoom：1”有时也会无效，这时，我们可能需要借助更为强大的“position：relative”来帮助触发hasLayout。总之，“zoom”是最常用、最安全、成本最小的触发hasLayout的方式，一般情况下，使用它就完全可以触发hasLayout了。如果遇到很特殊的情况，“zoom：1”无效的情况下，我们可以通过设置“position：relative”来触发hasLayout，尽管它会带来一点副作用。

    hasLayout的设计初衷是用于辅助会计元素的和模型解析，它是用于块级元素的。如果用于行内元素，会引发一些特殊的效果。