前言
绝对定位absolute和固定定位fixed会脱离文档流。（浮动float也会脱离文档流）
所谓的文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。
脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。
---部分无视和完全无视的区别？
需要注意的是，使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围(可以说是部分无视)。
而对于使用absolute position脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。(可以说是完全无视)
0.static
不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的的。
.static {
position: static;
}
1.relative
position：relative的另一个主要用法：方便绝对定位元素找到参照物。
.relative1 {
position: relative;
}
.relative2 {
position: relative;
top: -20px;
left: 20px;
background-color: white;
500px;
}
2.fixed
一个固定定位（position属性的值为fixed）元素会相对于视窗来定位，这意味着即便页面滚动，它还是会停留在相同的位置。和 relative 一样， top 、 right 、 bottom 和 left 属性都可用。
.fixed {
position: fixed;
bottom: 0;
right: 0;
200px;
background-color: white;
}
一个固定定位元素不会保留它原本在页面应有的空隙（脱离文档流）。
令人惊讶地是移动浏览器对 fixed 的支持很差（可以用jquery mobile解决）。
3.absolute
absolute 是最棘手的position值。 absolute 与 fixed 的表现类似，但是它不是相对于视窗而是相对于最近的“positioned”祖先元素。如果绝对定位（position属性的值为absolute）的元素没有“positioned”祖先元素，那么它是相对于文档的 body 元素，并且它会随着页面滚动而移动。记住一个“positioned”元素是指 position 值不是 static 的元素。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
重点：如果父级设置了position属性，例如position:relative;，那么子元素就会以父级的左上角为原始点进行定位。这样能很好的解决自适应网站的标签偏离问题，即父级为自适应的，那我子元素就设置position:absolute;父元素设置position:relative;，然后Top、Right、Bottom、Left用百分比宽度表示。
这里有一个简单的例子：
.relative {
position: relative;
600px;
height: 400px;
}
.absolute {
position: absolute;
top: 120px;
right: 0;
300px;
height: 200px;
}
这个元素是相对定位的。如果它是 position: static; ，那么它的绝对定位子元素会跳过它直接相对于body元素定位。
另外要注意：仅使用margin属性布局绝对定位元素的情况
此情况，margin-bottom 和margin-right的值不再对文档流中的元素产生影响，因为该元素已经脱离了文档流。另外，不管它的祖先元素有没有定位，都是以文档流中原来所在的位置上偏移参照物。
图9中，使用margin属性布局相对定位元素。
层级关系为：
<div ——————————— position:relative;
<div—————————-没有设置为定位元素，不是参照物
<div———————-没有设置为定位元素，不是参照物
<div box1
<div box2 ——–position:absolute; margin-top:50px; margin-left:120px;
<div box3
效果图：
参考：https://www.cnblogs.com/shenfangfang/p/5278528.html
http://zh.learnlayout.com/position.html