深入剖析CSS的相对定位

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

相对定位：

1 position:relative;

绝对定位：

1 position:absolute;

固定定位：

1 position:fixed;

 

一. 认识相对定位

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

 

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

1 position:relative;   → 必须先声明，自己要相对定位了， 2 left:100px;       → 然后进行调整。 3 top:150px;       → 然后进行调整。

 

2.相对定位用途

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

1） 微调元素

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

3.相对定位的定位值

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

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

↘：

1 position: relative; 2 top: 10px;  3 left: 40px;  → 往右边移动

 

↙：

1 position: relative; 2 right: 100px;   → 往左边移动 3 top: 100px;

 

↖：

1 position: relative; 2 right: 100px; 3 bottom: 100px;    → 移动方向是向上。

 

↗：

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

 

↗：

1 position: relative; 2 right: -300px; 3 bottom: 300px;

这完全等价于：

4 position: relative; 5 left: 300px; 1 bottom: 300px;