CSS中的定位有三种，分别是相对定位、绝对定位、固定定位。

相对定位：

1position:relative;

绝对定位：

1position:absolute;

固定定位：

1position:fixed;

一. 认识相对定位

1.相对定位，就是微调元素位置的。让元素相对自己原来的位置，进行位置调整。

也就是说，如果一个盒子想进行位置调整，那么就要使用相对定位

1position:relative;   → 必须先声明，自己要相对定位了，

2left:100px;       → 然后进行调整。

3top:150px;       → 然后进行调整。

2.相对定位用途

相对定位有坑，所以一般不用于做“压盖”效果。页面中，效果极小。就两个作用：

1）微调元素

2） 做绝对定位的参考，子绝父相

3.相对定位的定位值

可以用left、right来描述盒子右、左的移动；

可以用top、bottom来描述盒子的下、上的移动。

↘：

1position: relative;

2top: 10px;

3left: 40px;→ 往右边移动

↙：

1position: relative;

2right: 100px;   → 往左边移动

3top: 100px;

↖：

1position: relative;

2right: 100px;

3bottom: 100px;    → 移动方向是向上。

↗：

1position: relative;

2top: -200px;       → 负数就是相反的方向，如果是正，就是下边，如果是负数就是上边

3right: -200px;

↗：

1position: relative;

2right: -300px;

3bottom: 300px;

这完全等价于：

4position: relative;

5left: 300px;

1bottom: 300px;