前言：
在日常的工作中，我们也许会遇到极为苛刻的还原要求——————比如所谓的误差不超过1个像素。
作为前端开发人员，对于这种所谓1px的误差。。。怎么说呢，1px已经是屏幕最低分辨率了，怎么可能还有更低的误差呢，这分明是扯淡。
不过，有些事肯定是要追求极致的。为了追求极为细致的页面还原，position定位属性是必不可少的学习。
position的属性值
提到position的属性值，就要先说明一点。在CSS的样式编写中，你要养成一个特殊的顺序习惯：上右下左。
这对于页面样式的简写有帮助。
然后就是坐标的建立：以左上角为原点，向右为X轴正半轴，向下为Y轴正半轴。
两者结合，坐标的建立。
position的值可以设为relative，absolute，fixed，static。
接下来以这段代码作为实例，进行演示。
1 <div class="box">
2 <div class="box1"></div>
3 </div>
0,默认定位：
不会让div或者其他元素脱离文档流，而是遵循排版的原则，从上到下，块级元素换行，行内元素不换行等等通用原则。所以，如果不用定位属性，那么这个position就不用设置。
1,相对定位：
相对于元素原本的位置进行位移，原本的位置不为空，仍然已经位移的该元素继续占用
1 .box {
2 width: 50px;
3 height: 50px;
4 position: relative;
5 top: 50px;
6 left: 10px;
7 }
以上代码将实现将box以box最初的位置向右移动50px，向下移动10px。
2.绝对定位：
相对于元素的父元素最左上角进行坐标定位，会脱离文档流，产生类似浮动的效果
1 .box1 {
2 width: 10px;
3 height: 20px;
4 position: absolute;
5 top: 10px;
6 left: 10px;
7 }
以上代码将实现将box1的位置以当前的视口位置的原点为基准位置进行移动相应得距离；
这里要注意以下两点：
1，如果父元素没有设置定位的话，那么，绝对定位是相对于body标签进行定位的。
2，如果父元素设置了相对定位，绝对定位，固定定位，任意一种，那么，绝对定位相对于父元素左上角进行定位。
3，总结一下，定位是相对于父元素进行定位的，如果父元素没有设置定位属性，则相对于BODY标签进行定位。
3.固定定位：
相对于当前窗口最左上角进行坐标定位
1 .box {
2 width: 50px;
3 height: 50px;
4 position: fixed;
5 top: 20px;
6 left: 0px;
7 }
以上代码将会将box固定在视窗的距离顶部20px的左侧边缘位置。
定位使用经验
绝对定位会造成元素脱离了文档流，这时会产生元素堆叠的情况。此时可以配合z-index的属性，
如同PS排列图层一样，对页面的层级进行排序。
父元素相对定位，子元素绝对定位，是用来完美还原页面的一种手段，一般用来还原一些较为小的组件。
定位属性虽然强力，但是最好不要用来做整体的页面布局，容易造成页面错乱。
参考链接1：www.cnblogs.com/lianshoulug…
结语：
以上链接，我看过，很不错的笔记，我稍微整理了一下我个人觉得有用的部分，虽说可能还不够详细，但是已经够了解这个属性的意思了。
抓住了属性的本质，便不会被各种变化所困扰。
最后的最后：欢迎指出不足，来打脸。
