CSS的定位属性有三种，分别是绝对定位、相对定位、固定定位。
position: absolute; <!-- 绝对定位 -->
position: relative; <!-- 相对定位 -->
position: fixed; <!-- 固定定位 -->
相对定位：让元素相对于自己原来的位置，进行位置调整（可用于盒子的位置微调）。
我们之前学习的背景属性中，是通过如下格式：
background-position:向右偏移量 向下偏移量;
但这回的定位属性，是通过如下格式：
position: relative;
left: 50px;
top: 50px;
相对定位的举例：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
body{
margin: 0px;
}
.div1{
width: 200px;
height: 200px;
border: 1px solid red;
}
.div2{
position: relative;/*相对定位：相对于自己原来的位置*/
left: 50px;/*横坐标：正值表示向右偏移，负值表示向左偏移*/
top: 50px;/*纵坐标：正值表示向下偏移，负值表示向上偏移*/
width: 200px;
height: 200px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="div1">有生之年</div>
<div class="div2">狭路相逢</div>
</body>
</html>
相对定位：不脱标，老家留坑，别人不会把它的位置挤走。
也就是说，相对定位的真实位置还在老家，只不过影子出去了，可以到处飘。****
如果想做“压盖”效果（把一个div放到另一个div之上），我们一般不用相对定位来做。相对定位，就两个作用：