定位
定位的想法很简单元素框相对于正常位置出现在哪里。
定位：static，相对， 绝对， fixed， 继承
static就是默认的位置
相对就是相对于默认位置的偏移。原来的static定位位置依然占着。
绝对定位相对于包含块（非static的）的偏移。完全脱离文档流，原来的位置就没了。
fix相对于viewport视窗的偏移。
包含块
根元素是初始包含块，有的浏览器是html元素，有的为body。
非根元素，position为相对或者默认位置，包含块是最近祖先级的块级框、表格单元、行内块。
非根，position为绝对，包含块为最近的非static的祖先元素。
如果是块级，包含块的边界是包含块的内边界。
如果是行内，包含块是行框的边界。
如果没有祖先，包含块是初始包含块。
包含块（containing box）其实就是定位上下文。理解成给position定位的参考环境。
偏移属性
有了参考环境，在二维上，上下左右的偏移多少呢？
这个属性的值，可以为长度、百分比、auto、inherit
值可以为负数，就是反方向的偏移。
长度好理解，百分比即为包含块的值的百分比。比如top/bottom 10% 就是包含块高的百分之10，如果left/right就是宽度的。
发现了一个问题，如果一个定位为relative的元素的包含块高度未设置，应该为auto的话。top/bottom设置为百分比的值。浏览器（firefox38）会忽略掉这个百分比的值。
参考：
Last Comment Bug 260348 - Relative positioning with percentages inside auto-height containing block does not work
https://bugzilla.mozilla.org/show_bug.cgi?id=260348