position属性干嘛的？
定位的。绝对定位，相对定位
如何定位？
举个例子
<style type="text/css">
h2.pos_abs
{
background: yellow;
position:absolute;
left:100px;
top:100px;
}
</style>
这个结果如下。可以看到距离左侧，上侧各100px。相对于浏览器页面。上述三个参数position，left，top的位置无关紧要。
在线查看
W3School在线测试工具 V2
绝对定位适合不规律布局
绝对定位相对于其父元素进行定位.
真的绝对定位就相当于是有绝对坐标系了，而事实上并没有绝对坐标系，除非人为规定一个。
对于某一元素而言，是相对于其父元素进行绝对定位的。比如
<style>
.divcss5{ position:relative;width:400px;height:200px;
border:1px solid #000}
/* 定义父级position:relative 为就认为是绝对定位声明吧 */
.divcss5-a{ position:absolute;width:100px;height:100px;
left:10px;top:10px;background:#000}
/* 使用绝对定位position:absolute样式 并且使用left top进行定位位置 */
.divcss5-b{ position:absolute;width:50px;height:50px;
right:15px;bottom:13px;background:#00F}
/* 使用绝对定位position:absolute样式 并且使用right bottom进行定位位置 */
</style>
<div class="divcss5">
<div class="divcss5-a"></div>
<div class="divcss5-b"></div>
</div>
结果，图中的1和2都是相对于<div class="divcss5"> 来定位的。
CSS position绝对定位absolute relative - DIVCSS5
把上述例子中的第二个relative改成static（或者干脆不要）会是什么结果？
<style>
.divcss5{ position:relative;width:400px;height:200px;
border:1px solid #000}
/* 定义父级position:relative 为就认为是绝对定位声明吧 */
.divcss5-a{ position:absolute;width:100px;height:100px;
left:10px;top:10px;background:#000}
.divcss5-b{ position:static;width:50px;height:50px;
right:15px;bottom:13px;background:#00F}
</style>
<div class="divcss5">
<div class="divcss5-a"></div>
<div class="divcss5-b"></div>
</div>
结果如图。先是1区域以及其父元素进行定位。那么2呢？2是依据谁定位的呢？2区域依据浏览器
static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
image.png
也就是说改成staic以后，就走正常的流了。由于1区域定位留下了空间嘛。正常后面的元素就会补上。所以2就是那么个位置。
再次进行修改，把最后一个absolute改成relative
<style>
.divcss5{ position:relative;width:400px;height:200px;
border:1px solid #000}
/* 定义父级position:relative 为就认为是绝对定位声明吧 */
.divcss5-a{ position:absolute;width:100px;height:100px;
left:10px;top:10px;background:#000}
.divcss5-b{ position:relative;width:50px;height:50px;
right:15px;bottom:13px;background:#00F}
</style>
<div class="divcss5">
<div class="divcss5-a"></div>
<div class="divcss5-b"></div>
</div>
结果如下。看起来2区域已经跑出狂歪了。因为2区域相对于正常的文档流向左和向上移动了xx px。
没有父元素如何定位？
相对于浏览器左上角进行定位。
fixed定位才是真正的绝对定位
（这里起了个名字叫固定定位）
把上述代码的relative用fixed代替，查看结果。这就是任何时候都是相对于浏览器窗口进行的定位。
<style>
.divcss5{ position:relative;width:400px;height:200px;
border:1px solid #000}
/* 定义父级position:relative 为就认为是绝对定位声明吧 */
.divcss5-a{ position:fixed;width:100px;height:100px;
left:10px;top:10px;background:#000}
.divcss5-b{ position:fixed;width:50px;height:50px;
right:15px;bottom:13px;background:#00F}
</style>
<div class="divcss5">
<div class="divcss5-a"></div>
<div class="divcss5-b"></div>
</div>
这里的命名不太好，绝对定位应该改名叫相对父元素定位，而fixed应该叫相对浏览器定位
relative定位又是相对谁？
把上面的absolute又都改成relative。其他不变。看看结果
<style>
.divcss5{ position:relative;width:400px;height:200px;
border:1px solid #000}
/* 定义父级position:relative 为就认为是绝对定位声明吧 */
.divcss5-a{ position:relative;width:100px;height:100px;
left:10px;top:10px;background:#000}
.divcss5-b{ position:relative;width:50px;height:50px;
right:15px;bottom:13px;background:#00F}
</style>
<div class="divcss5">
<div class="divcss5-a"></div>
<div class="divcss5-b"></div>
</div>
relative是这么说的
生成相对定位的元素，相对于其正常位置进行定位。
那么问题来了，啥叫正常位置？
理解正常位置要理解文档流。文档流就是各种定位方法都不要，该换行换行诸如此类。
relative：对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。
将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。
总结
记住两点
1.absolute定位脱离正常文档流，relative并不脱离正常文档流，而且相对于正常文档流进行定位。
2.问题的关键在于理解什么是正常文档流。
参考
CSS Position 定位属性 - polk6 - 博客园
Position属性四个值：static、fixed、absolute和relative的区别和用法 - Newbie_小白 - 博客园
