参考：https://www.cnblogs.com/michael-xiang/p/4629852.html
什么是文档流？
normal flow（普通流），元素在html中的排列方式——块级元素独占一行垂直排列，内联元素在行内从左至右依次排列
静态定位（static）
static定位，也叫静态定位，是html元素默认的定位方式，它遵循正常的文档流，占用文档空间，该定位方式下，top、right、bottom、left、z-index等属性是无效的
相对定位（relative）
relative定位，也叫相对定位，根据原本在文档流中的位置进行偏移，遵循正常的文档流，但是top、right、left、bottom属性是生效的，可以说它是static到absolute的一个中间过渡属性，最重要的是相对定位会占用原本的文档空间。
如下图所示，虽然红色方框相对虚线方框（原本位置）进行偏移，但是仍然占据原本的文档空间，所以绿色方框位置不会改变，并且红色方框的偏移会覆盖其他方框。
<style type="text/css">
.red{position: relative; top: 20px; left: 20px;}
</style>
绝对定位（absolute）
absolute定位，也叫绝对定位，使用绝对定位的元素脱离文档流，只能根据祖先类元素(父类以上)进行定位，而且这个祖先类还必须是以position属性非static方式定位的。 举个栗子，a元素使用绝对定位，它会从父类开始找起，寻找以position属性非static方式定位的祖先类元素，直到<html>标签为止。这里还需要注意的是，relative和static方式在最外层是以<body>标签作为定位原点，而absolute方式是以<html>标签作为定位原点。<html>和<body>元素相差8px左右。如下图所示，红色虚线框使用绝对定位，绿色虚线框使用相对定位。
<style type="text/css">
.green{border: 2px dotted green; position: relative;}
.red{border: 2px dotted red; position: absolute; top: 0px; left: 0px;}
</style>
绝对定位使元素的位置与文档流无关，因此不占据文档空间，这一点与相对定位不同。如下图所示，红色方框使用绝对定位相对<html>元素进行偏移，而绿色方框的位置与红色方框无关。
为什么absoulte定位要加 top: 0px; left: 0px; 属性，是不是多此一举呢？
其实加上这两个属性是完全必要的，因为我们如果使用absolute和fixed定位的话，必须指定top、right、bottom、left属性中的至少一个，否则top、right、bottom、left属性会使用它们的默认值auto，这将导致对象遵从正常的HTML布局规则，在前一个对象之后立即被呈递，简单讲就是都变成relative，会占据文档空间，这点非常重要，很多人使用absolute定位后发现没有脱离文档流就是这个原因，这里要特别注意！
少了top、right、bottom、left属性不行，那如果我们多设了呢？例如，我们同时设置了top和bottom的属性值，那元素又该往哪偏移好呢？记住下面的规则：
如果top和bottom同时存在，那么只有top生效
如果left和right同时存在，那么只有left生效
<style type="text/css">
.red{background: red;position: absolute; top: 20px; left: 20px;}
.green{background: green;}
</style>
最后再啰嗦一遍：使用绝对定位的元素的位置相对于最近的已定位的祖先元素，如果没有已定位的祖先元素，那么它的位置相对于最初的包含块。
固定定位（fixed）
fixed定位，又叫固定定位，它和absolute定位一样，脱离了文档流，并且能够根据top、right、left、bottom属性进行定位。但不同的是，fixed是根据窗口为原点进行偏移定位的，也就是说它不会根据滚动条的滚动而进行偏移。
z-index属性
z-index，又称为对象的层叠顺序，它用一个整数来定义堆叠的层次，整数值越大，则被层叠在越上面，当然这是指同级元素间的堆叠，如果两个对象的此属性具有同样的值，那么将依据它们在HTML文档中流的顺序层叠，写在后面的将会覆盖前面的。需要注意的是，父子关系是无法用z-index来设定上下关系的，一定是子级在上父级在下。
Note：使用static 定位或无position定位的元素z-index属性是无效的。
浮动
参考：http://www.w3school.com.cn/css/css_positioning_floating.asp
1032
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
