其实position的值有四个，static/relative/absolute/fixed，而static是默认值，不算具有有定位属性，这里就不讲了。
定位其实就是跟元素设置定位属性，然后设置其对位的相对上下左右的距离，一般写法如下：
position:absolute;
top:20px;
left:20px;
下面我们分情况讨论：
1、父级没有定位属性的情况，用relative和abosolute配合使用，解决一般的定位问题。
abosolute：绝对定位，其意义是相对其最近的一个有定位属性的父级元素进行定位。
如果我们期望用于定位的父级没有定位属性，那么就可以给此父级加上position:relative属性，这样就能相对这个父级去定位了（原因不细讲了，照写就ok）。实例代码如下：
让类名div01相对于div03去定位
<div class="div03">
<div class="div02">
<div class="div01">蓝色</div>
</div>
</div> <style>
.div03{ height:500px; width:300px; padding:50px; background:#f0f0f0; position:relative;}
.div02{ height:300px; width:200px; background:#dddddd;}
.div01{ height:100px; width:200px; background:#3498db; position:absolute; top:20px; left:20px;}
</style>
定位效果如下图：
2、父级有定位属性的情况。
如果我们期望用于定位的父级已经有position或者abosolute定位属性，那么就直接按第（1）中情况那样想写需要定位元素的定位就可以啦，它就会相对于那个有定位属性的父级去定位。
3、position:relative；
此属性表示元素相对于自己去定位，如果我需要将元素相对自己往上移动10像素，而又不影响周围其他元素的位置，则可以向如下这样写样式：
position:relative;
top:-10px;
left:0px;
此属性设置时，在页面或页面内部有滚动条的时候，有可能会影响页面宽度以及overflow:hidden的效果，不建议使用，我是一般都不用，可以用margin/padding、或者position:absolute解决，就不要用relaive去解决;
4：positon:fixed;
这个是相对于整个页面框架去定义定位，你可以简单的理解为相对于可视区去定位，一般页面上飘来飘去的，或者浮动在顶部或右下角的小模块都是用的fixed;
position:fixed;
bottom:0px;
left:0px;
这就是相对于页面浮动在最下面，如下图这个效果
fixed的一个使用技巧：
有时候自己写模态框弹层的时候，需要加一个始终覆盖的半透明的背景层，这个给一个div标签可以设置以下样式即可
background:#000;
position:fixed;
top:0px;
left:0px;
bottom:0px;
right:0px;
opacity:.7;
filter:alpha(opacity=70);
而中间弹窗定位也用fixed,但其top和left的值，最好使用js去更具具体页面高宽来计算具体的值才能很好的居中。
5、z-index
所有的定位都是脱离了原来的文档层，就像一本书，以前所有类容都在同一页，而position之后，就可以放在不同层级的各页，z-index值越高，就在越上层，默认值相当于0; 用法如下
position:absolute;
top:20px;
left:20px;
z-index:999;