css有三种定位机制
- 标准流
- 浮动
- 绝对定位
只要不指定，所有标签均在标准流中定位。块级标签由于独占一行，所以从上到下排列，而行内和行内块级则水平排列。
css position
一切标签皆是框
通过position属性，我们可以选择四种不同类型的定位
- static:按标准流定位（村里分地，按照规则正常分）
- relative:框偏移某个距离，原本在正常文档流中所占空间仍保留（我分来的地我不种，但还是我的，你分的还是按规则分来的地）
- absolute:框从正常文档流中删除（我退出分地，接下来的人可以分这块地），相对于其包含块定位（从父块一直向上找，找到一个不是static的包含块，相对于其定位）
- fixed:类似于absolute，不过包含块直接设置为窗口。
talk is less show code!
static就不写了
relative
<style>
.left{
position: relative;
left: -20px;
}
.right{
position: relative;
left: 20px;
background-color: blue;
}
.up{
position: relative;
top: -20px;
background-color: yellow;
}
.down{
position: relative;
background-color: red;
}
</style>
<p>原始</p>
<p class="left">原始</p>
<p class="right">原始</p>
<p class="up">原始</p>
<p class="down">原始</p>
屏幕快照 2016-03-27 下午8.08.48.png
我们注意到，黄色的div由于设置了top: -20px，向上偏移了。但是关键的问题来了，接下的红色div仍是按照黄色div原先在文档流中的位置向下定位的，我们将top: -20px;的代码注释掉，结果如下
屏幕快照 2016-03-27 下午8.08.18.png
这就是relative中原本在正常文档流中所占空间仍保留的意思。
