css布局—相对定位

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

②作为绝对定位的参考盒子，“子绝父相”