标准文档流： 我们在编写html代码的时候，通常的各个元素的布局方式是按照我们编写代码的顺序来排布的，从左到右，从上到下的顺序，当然，如果都是行内元素则都在一行显示，如果碰到块级元素就让块级往下独占一行显示，这种就叫标准文档流
position的四个属性：
一、相对布局（relative）：当我们写了三个行内元素ABC，则它们会从左到右挨在一起排布，如果将中间的元素B加上相对布局，调整它的下间距，那么它会相对于它之前按照标准文档流放入的起始位置向上（正数向上负数向下）移动，A和C的位置保持不变,看下面的例子
可以看出中间的元素向上移动了10个像素，而左右两边的元素都没有动
二、固定布局（fixed）：加上这个属性就会脱离标准文档流的限制，按照上面的例子，如果对中间的strong元素加上固定布局，那么右边的元素a会向左移，与中间的srong元素重叠在一起，也就是左边和右边的元素按照标准文档流来排布，相当于中间的元素不存在一样，看下面的代码
可以看出最右边的元素直接挨着最左边的元素，无视中间加上固定布局元素的存在，这样固定元素就脱离了标准文档流的限制，如果对其设置边距，边距是相对于浏览器视口作为参照物的，而且在拖动浏览器的时候该元素也不会跟着滑动，而是固定在那里（类似悬浮效果）
可以看出当我们滑动滚动条时，固定布局的元素也没有跟着移动
三、绝对布局（absolute）：当元素设置了绝对布局，那么该元素的相对参照物就是第一个设置了位置布局的父view，也就是第一个设置了绝对布局、相对布局或者固定布局的父view，如果都是默认的static布局，那么该元素的参照物就是视口，设置了绝对布局的元素会脱离标准文档流，而且不占父view的大小,看下面的例子
可以看出三个div按照标准文档流布局就是上面的样式，三个div默认都是static布局，这时如果将最里面的div box3设置成绝对布局,box就脱离的标准文档流的束缚，然后向外层找第一个设置了位置布局的父view，一直到视口都没有找到，这时就以视口为参照进行布局
可以看出box3设为绝对布局后，参照物变为了视口，所以距离视口的上右间距都为100
注意：当box3只是设置了绝对布局，但没有设置上下左右这些属性时，box3的这些属性时auto自动的，也就是不管会默认放在什么位置都不会觉得奇怪，而且这里和之前的固定定位不一样，固定定位当浏览器滚动条滑动的时候，固定定位的元素不会跟着滑动，但绝对定位的元素是会跟着一起滑动的
下面再看下将box3设为绝对定位的同时将box2设置为相对定位
可以看出当我们将box3的父view box2设置为相对定位后，box3的参照物就变为了box2
再看我们将box3设为绝对布局的同时将box1设为相对布局，box2位默认static布局
可以看出当我们将box3的祖父view box1设置为相对定位后，box3的参照物就变为了box1
子绝父相：在实际开发中，我们将子视图设为绝对布局时，一般都会将父视图设为相对布局，这样可以达到父视图的位置还是原来的位置，如果将父视图设为绝对布局或者固定布局，那父视图的位置也会跟着发生改变，他们都会脱离标准文档流布局
我们再来验证下绝对布局不会占用父视图的大小
可以看出按照标准文档流的布局，<span>标签和<div>标签的位置就是上图所示，inline-block表示包裹住子元素，不要有多余的区域，如果不设置该属性，那么box1作为块元素将显示整行，也就是蓝色背景会填充到最右边。
我们将box2设为绝对布局，并且将box1设为相对布局，如下
可以看出绝对布局的box2的参照物就是具有相对布局的父view box1，top-30px，表示距离box1的顶部有30px，与左边对齐，而且box1的背景颜色只有<span>文字的大小区域，并没有将box2的大小计算在内，说白了box1的大小就是<span>元素的大小
四、默认布局（static）：按照标准文档流进行布局，并且static布局的元素不会受到top/left/bottom/right属性的影响。布局元素的位置即其在标准文档流中的位置。
最后说一个细节，每次最外层的view和浏览器的视口都有一点间距，就是说body的上左都与浏览器有一点间距，这或许是浏览器故意这样处理的，只需要将body的margin设为0即可
