position:relative;
例：

position:relative;
left:200px;
top:40px;

相對定位是相對于原位置進行偏移。
相對定位有4個方向的值可以改變：
left：40px; //正數(shù)，表示向右偏移40px
right：40px; //正數(shù)，表示向左偏移40px
top:40px; //正數(shù)，表示向下偏移40px
bottom: 40px; //正數(shù)，表示向上偏移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;
}

屬性值可以是負數(shù)，表示相同方向上的移動。
例：

.box2{
    position:relative;
    right:-240px;   //表示向右移動240px
    top:-100px;     //表示向上移動100px；
}

等價于：

 .box2{
position: relative;
left:240px;
bottom:100px;
}

相對定位相對于原位置進行偏移，沒有脫離標準文檔流。原位置保留，新位置隨意。（形影分離）
應(yīng)用：
①位置微調(diào)
例：

<p>文字文字文字文字文字文字文字文字文字文字文字文字文字<span>[1]</span></p>
p span{
font-size: 14px;
    position: relative;
    top:-10px;
    }

clipboard.png

②作為絕對定位的參考盒子，“子絕父相”