html:
    代码：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Document</title>
    7.     <link rel="stylesheet" href="../css/reset.css">
    8.     <link rel="stylesheet" href="../css/69绝对定位.css">
    9. </head>
    10. <body>
    11.     <div class="box1"></div>
    12.     <div class="box2"></div>
    13.     <div class="box3"></div>
    14. </body>
    15. </html>

    css:
    （1）使用相对定位，首先需要使用position: relative; 然后，使用top: ; left: ;来调整位置

    （2）使用相对定位，会使得优先级高于块级元素

    （3）使用相对定位，不会改变该元素性质，该是块元素还是块元素，该是行内元素还是行内元素

    （4）
    -相对定位:
    -当元素的position属性值设置为relative时则开启了元素的相对定位-相对定位的特点;
    1.元素开启相对定位以后，如果不设置偏移量元素不会发生任何的变化2.相对定位是参照于元素在文档流中的位置进行定位的
    2.相对定位是参照于元素在文档流中的位置进行定位的
    3.相对定位会提升元素的层级
    4.相对定位不会使元素脱离文档流
    5.相对定位不会改变元素的性质块还是块，行内还是行内
    - 偏移量（offset)
    -当元素开启了定位以后，可以通过偏移量来设置元素的位置
    top
    -定位元素和定位位置上边的距离bottom
    -定位元素和定位位置下边的距离
    -定位元素垂直方向的位置由top和bottom两个属性来控制
    通常情况下我们只会使用其中一
    - top值越大，定位元素越向下移动- bottom值越大，定位元素越向上移动left
    -定位元素和定位位置的左侧距离right
    -定位元素和定位位置的右侧距离
    -定位元素水平方向的位置由left和right两个属性控制
    通常情况下只会使用一个
    - left越大元素越靠右
    - right越大元素越靠左

    代码：

    .box1 {
    width: 200px;
    height: 200px;
    background-color: hotpink;
}

.box2 {
    width: 200px;
    height: 200px;
    background-color: indianred;
    position: relative;
    left: 200px;
    top: -200px;
}

.box3 {
    width: 200px;
    height: 200px;
    background-color: lightblue;
}

    image.png