常见的定位机制

定位方案是控制元素的布局，常见的有三种：

普通流（normal flow） 

其实就是元素按照再HTML中的先后位置自上而下布局，在这个过程中，行内元素水平排列，直到当行被沾满然后换行，块级元素则会被渲染为完整的一个新行，除非另外制定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在HTML文档中的位置决定。

浮动（float）

在浮动布局中，元素首先按照普通流的位置出现，然后根据浮动的方向尽可能地向左边或右边偏移，其效果与印刷排版中的文本环绕相似。

定位（positioning）

绝对定位（absolute positioning）

在绝对定位布局中，元素会整体脱离普通流，因此绝对定位元素不会对其兄弟元素造成影响，而元素具体的位置由绝对定位的坐标决定。这种定位通过设置top、right、bottom、left这些偏移值，相对于 static 定位以外的第一个父元素进行定位（这种定位通常设置父元素为relative定位来配合使用），在没有父元素的条件下，它的参照为body，该方式脱离文档流；

静态定位（static positioning）

当我们没有指定定位方式的时候，这时默认的定位方式就是static，也就是按照文档的书写布局自动分配在一个合适的地方，这种定位方式用margin来改变位置，对left、top、z-index等设置值无效，这种定位不脱离文档流；

相对定位（relative positioning）

该定位是一种相对的定位，可以通过设置left、top等值，使得指定元素相对其正常的位置进行偏移，这种定位不脱离文档流；

固定定位（fixed positioning）

生成绝对定位的元素，相对于浏览器窗口进行定位。这种定位方式是相对于整个文档的，只需设置它相对于各个方向的偏移值，就可以将该元素固定在页面固定的位置，通常用来显示一些提示信息，脱离文档流；

inherit定位

这种方式规定该元素继承父元素的position属性值。

注释：即将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当没看到它，两者位置重叠都是可以的。

使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。

<div class="first">123</div>
<div class="second">456</div>
 <style>
        .first {
            width: 200px;
            height: 200px;
            border: 3px solid red;
            float: left;
        }
        .second {
            width: 200px;
            height: 100px;
            border: 3px solid blue;
        }
    </style>

这段代码中把红色的框设置为了左浮，所以红色的框称为了浮动状态（浮动在蓝色框的上面），而蓝色框占用了原来空色框的位置。注意到，蓝色框中的文本依然认为红色框存在，所以为红色框让出了位置。由于div是块状元素，所以456出现在下方。

使用absolute :position脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。

<div class="first">123</div>
<div class="second">456</div>
<div class="third">789</div>
 <style>
.first {
width: 200px;
height: 200px;
border: 3px solid red;
}
.second {
width: 200px;
height: 100px;
border: 3px solid blue;
position: absolute;
}
.third {
width: 200px;
height: 200px;
border: 3px solid green;
}
</style>

通过把蓝色的框的position设置为absolute使蓝色的框变为浮动状态，可以看到绿色的框被蓝色的框遮挡。emmm...，看起来貌似没有问题，但是还记得前面说的absolute是相对谁定位的吗？相对非static元素的父级定位的，这里蓝框的父级就是html，所以应该是相对于html定位，但是代码中没有提供相对位置，所以只能浮动在原来该元素在文档流中的位置上方。

.second {
width: 200px;
height: 100px;
border: 3px solid blue;
position: absolute;
left: 0;
top:0;
}

结果很明显，蓝色的框遮住了html的点，所以当父级元素的position全是static的时候，absolute是相对于html来进行定位的。