一、相对定位
使用相对定位的盒子会相对于自身原本的位置，通过偏移指定的距离，到达新的位置。盒子的本体仍处于文档流中。使用相对定位，除了要将 position 属性值设置为 relative 外，还需要指定一定的偏移量。其中，水平方向的偏移量由 lett 和 right 属性指定；垂直方向的偏移量由 top 和 bottom 属性指定。
⚠️：两个方向各选一个参数即可定位；定位的数值可以为负数。
举个栗子
① 先放三个盒子，注意盒子的位置为“自上向下排列”。前面的知识点有提过“块元素一般从上到下排列摆放”。
<head>
<style>
div{
width: 100px;
height: 100px;
border: 5px rgb(61, 148, 247) solid;
}
<style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>运行结果：
② 然后我们设置一下第一个盒子的颜色和相对定位。
<head>
<style>
#div1{
border: 5px rgb(241, 76, 175) solid;
position:relative; /*设置相对定位*/
left: 70px; /*距离父容器左端70px*/
top: 50px; /*距离父容器顶端50px*/
}
</style>
</head>
<body>
<div id="div1"></div>
</body>可以看到盒子相对于父容器产生了偏移。注意这时下面的盒子并没有往上移动，仍在原来的位置。这是由于盒子的本体仍处于文档流中。
做个小练习
老规矩先看图自己敲出代码，不懂再看代码~
<head>
<style>
img{
width: 100px;
height: 100px;
/* 盒子边框的厚度 颜色 样式 */
border: 2px red solid;
left: 10px;}
#img1{
width: 100px;
height: 100px;
border: 6px rgba(132, 230, 166, 0.815) solid;}
#img2{
width: 100px;
height: 100px;
border: 6px rgba(235, 238, 140, 0.858) solid;
position:relative;
left: 70px;
top: 50px;}
#img3{
width: 100px;
height: 100px;
border: 6px rgba(125, 225, 231, 0.815) solid;
position:relative;
left: 10px;}
</style>
</head>
<body>
<img src="./苹果.jpg" id="img1">
<img src="./苹果.jpg" id="img2">
<img src="./苹果.jpg" id="img3"><br>
<img src="./苹果.jpg">
<img src="./苹果.jpg">
<img src="./苹果.jpg">
</bdoy>