SOURCE

<!--
    绝对定位
        当把元素的 position 属性值设置为 absolute 时，就开启了元素的绝对定位
        特点:
            --开启绝对定位后，还需设置偏移量，否则元素的位置不会发生任何的变化
            --绝对定位会会提升元素的层级
            --相对定位会令元素脱离文档流
            --绝对定位会改变元素的性质，行内变成块，块的宽高被内容撑开
            --绝对定位下，元素的位置是相对于它的包含块来进行定位的【重要】
    包含块( containing block )
        正常情况下:
            对于一个元素来说，包含块就是距离它最近的祖先块元素，注意是块元素
        祖先元素开启了定位:
            对于一个元素来说，如果它的一个或多个祖先块元素也开启了绝对定位，
            那么包含块就是距离它最近的那个开启了定位(这个定位指定是所有种类的定位)的祖先元素。
        html（根元素、初始包含块)
            如果所有的祖先元素都没有开启定位，则根元素就是它的包含块。
-->
<div class="box1">1</div>
<div class="box5">
    5
    <div class="box4">
        4
        <div class="box2">2</div>
    </div>
</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;
    position: absolute;
    left: 0px;
    top: 0px;
}
.box3{
    width: 200px;
    height: 200px;
    background-color:blue;
}
.box4{
    width: 300px;
    height: 300px;
    background-color:coral;
    position: relative;
}
.box5{
    width: 400px;
    height: 400px;
    background-color:lightseagreen;
    position: absolute;
}