position:relative;
例：
position:relative;
left:200px;
top:40px;
相对定位是相对于原位置进行偏移。
相对定位有4个方向的值可以改变：
left：40px; //正数，表示向右偏移40px
right：40px; //正数，表示向左偏移40px
top:40px; //正数，表示向下偏移40px
bottom: 40px; //正数，表示向上偏移40px
4个属性值可以任意使用，需要水平方向和垂直方向各选一个属性值。
4个参考点：
box2{//参考点：左上角
position:relative;
left:200px;
top:40px;
}
box1{//参考点：左下角
position:relative;
left:200px;
bottom:40px;
}
.box3{//参考点：右上角
position:relative;
right:40px;
top:50px;
}
.box4{//参考点：右下角
position: relative;
right:40px;
bottom:100px;
}
属性值可以是负数，表示相同方向上的移动。
例：
.box2{
position:relative;
right:-240px; //表示向右移动240px
top:-100px; //表示向上移动100px；
}
等价于：
.box2{
position: relative;
left:240px;
bottom:100px;
}
相对定位相对于原位置进行偏移，没有脱离标准文档流。原位置保留，新位置随意。（形影分离）
应用：
①位置微调
例：
<p>文字文字文字文字文字文字文字文字文字文字文字文字文字<span>[1]</span></p>
p span{
font-size: 14px;
position: relative;
top:-10px;
}
clipboard.png
②作为绝对定位的参考盒子，“子绝父相”
