想要了解盒子的相对定位，首先要清楚盒子的定位是怎样的：
盒子的定位是使用 position 属性来实现不同的定位方式，其参数为 static（静态定位）、 relative（相对定位）、 absolute（绝对定位）和 fixed（固定定位）；元素的位置通过 left 、top 、right 以及 bottom 属性进行规定。
相对定位的概念
相对定位是相对于盒子自身的原始位置进行定位。通过设置top、right、bottom、left属性（其属性值可为负数），可以改变盒子的位置，但是其他元素不会受到影响。相对定位的元素在文档流中仍然占据原始位置。 也就是说，在相对定位中，盒子并没有脱离文档流，它不会影响其他元素的布局，并且在正常文档流中保持其占据的空间，网页中的文档流机制的流水线排布方式还是存在。
下面通过实例来讲解：
下面是三个Div元素在正常文档流网页中的排列方式 ：
下面是通过相对定位将绿色Div元素分别相对于上边距和左边距偏移50px：
其代码为：
<head>
<style>
div{
width: 100px;
height: 100px;
margin: 3px;
}
#div1{
background-color: red;
}
#div2{
background-color: green;
/* 使用相对定位 */
position: relative;
left: 50px;
top: 50px;
}
#div3{
background-color: blue;
}
</style>
</head>
<body>
<div id="div1">红</div>
<div id="div2">绿</div>
<div id="div3">蓝</div>
</body>由上可以看见，即使绿色Div元素移动之后，它原来的位置始终保留着，蓝色Div元素并没有占据它的位置。（就好比图一红黄绿坐在自己位置上看表演，图二绿站起来去到旁边，但是它的椅子还是在原来的位置，没人能够移动和占据那把椅子），这就是保留在网页中的文档流的强大
相对定位练习：
运行出如下效果：
示例代码：
<head>
<style>
img{
width: 100px;
height: 100px;
}
#img1{
width: 100px;
height: 100px;
border: 3px red solid;
}
#img2{
width: 100px;
height: 100px;
border: 3px green solid;
position: relative;
top: 50px;
left: -50px;
}
#img3{
width: 100px;
height: 100px;
border: 3px blue solid;
}
div{
width: 100px;
height: 100px;
border: 3px yellow solid;
}
</style>
</head>
<body>
<img src="../html5.jpg" alt="" id="img1">
<img src="../html5.jpg" alt="" id="img2">
<img src="../html5.jpg" alt="" id="img3">
<br>
<img src="../html5.jpg" alt="">
<img src="../html5.jpg" alt="">
<img src="../html5.jpg" alt="">
<div></div>
<div></div>
<div></div>
</body>