CSS之定位，relative/absolute/fixed的用法

其实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;

原文链接：css的定位，relative、absolute和fixed的用法