概述：position是我们日常在进行页面布局时经常用到的一个属性，可以说是非常重要的一个部分，那么他有那些属性呢，我们今天来解析一下position经常使用的几个属性。
在使用定位之前我们需要先了解一下什么是正常的文档流。
什么是文档流布局？一下是我搜索到的相对严谨的解释:
将窗体自上而下分成一行行， 并在每行中按从左至右的顺序排放元素，即为文档流。
每个非浮动块级元素都独占一行， 浮动元素则按规定浮在行的一端。 若当前行容不下， 则另起新行再浮动。
内联元素也不会独占一行。 几乎所有元素(包括块级，内联和列表元素）均可生成子行， 用于摆放子元素。
有三种情况将使得元素脱离文档流而存在，分别是 浮动，绝对定位， 固定定位。 但是在IE6中浮动元素也存在于文档流中。（百度搜索）
其中fixed与absolute会脱离正常的文档流，而relative和static则还是会处于正常的文档流中。
1.position:relative;
相对定位：元素依然还处于正常的文档流中，但是可以通过left、top、right和bottom的css规则来改变元素的位置。
<style>
#one{
100px/%;
height:100px/%;
background:red;
}
#two{
100px/%;
height:100px/%;
background:blue;
position:relative;
left:20px;
}
</style>
这时两个盒子还会按照正常的文档流进行排列，但是是可以通过left、top、right和bottom来进行位置的修改。
2.position:absolute;
绝对定位：元素会脱离正常的文档流，可以通过left、top、right和bottom的CSS规则来改变元素的位置。
细节：如果没有任何一个父级元素是非position:static属性，则会相对于文档定位。这里它的父级元素是没有限制的，只要是他的父级元素任意一级都可以。如果它的父级元素和爷爷级元素都是非position:static 属性，则，它会选择距离最近的父元素。
<style>
#two{
100px;
height:100px;
background:blue;
position:absolute;
left:20px/%;
top:20px/%;
}
</style>
第二个盒子这时会浮动到你窗口的起始位置，如果他还有父级元素的话那么他是会在父元素的范围内进行定位，如果没有的话他是相对与于浏览器的窗口进行定位。
3.position:fixed;
相对于浏览器定位：元素脱离正常的文档流，可以通过left、top、right和bottom的css规则来修改元素的位置（经常使用与广告窗及在线咨询之类的服务窗口）。
<style>
#two{
100px;
height:100px;
background:blue;
position:fixed;
left:100px/%;
top:100px/%;
}
</style>
代码运行结果是始终按照窗口进行定位如果不使用left、top、right和bottom四个属性进行位置调整的话则是在父级元素窗口的初始位置。
4.position:static;
默认定位：元素将按照正常的文档流规则进行排列，即使没有给某个元素添加position，那么他就相当于有一个默认的position:static;这个就不多说了（因为没什么卵用）。
5.position:inherit;
继承定位：这个属性指的是子元素可以继承至父元素的一些属性，规定应该是从父元素继承 position 属性的值，但是这个属性在我们日常的使用中几乎不怎么碰，所以也就不多说了。
以上就是我对position的属性的一些使用所总结出来的经验，其中有些是原创，有些来源于网络搜索，谢谢大家！