SOURCE

<!--
本节要实现的内容：
将 box2 移动到 box1 的右边，其他元素位置保持不变。
而且我们希望在移动 box2 的时候，不会对其他元素的位置产生影响 
-->
<!--
定位（position)
        --定位是一种更加高级的布局手段
        --通过定位可以将元素摆放到页面的任意位置
        --使用 position 属性来设置定位
    可选值:
        --static     默认值，元素是静止的，此时和不写 position 一样
        --relative   开启元素的相对定位
        --absolute   开启元素的绝对定位
        --fixed      开启元素的固定定位
        --sticky     开启元素的粘滞定位
    相对定位:
        --当元素的 position 属性值设置了 relative 时，就开启了元素的相对定位。
        特点:
            --元素开启相对定位后，还需设置偏移量，否则元素的位置不会发生任何的变化。
            --相对定位下，被移动元素是参照于自己原来在文档流中的位置进行定位的【重要】
            --相对定位会提升元素的层级
            --相对定位不会令元素脱离文档流
            --相对定位不会改变元素的性质：块还是块，行内还是行内
    偏移量（offset)
            当元素开启了定位以后，就可以通过偏移量来设置元素的位置
        偏移量的类型：
                top
                bottom
                left
                right
-->
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>

body{
    font-size: 60px;
}
.box1{
    width: 200px;
    height: 200px;
    background-color: red;
}
.box2{
    width: 200px;
    height: 200px;
    background-color:aqua;
    /*
    margin-top: 20px;

    position: relative;  
    top: 20px;
    我们可以分别运行 margin-top 和 top 来查看效果区别 */
    position: relative;
    left: 200px;
    top: -200px;
}
.box3{
    width: 200px;
    height: 200px;
    background-color:blue;
}