SOURCE

<!-- 绝对定位 -->
<!-- 定位参照物：
1.相对定位：原来的位置
2.绝对定位：脱离了文档流，默认body，如果有定位父级，参考父级。必须要有参照物。

 -->

<div class="parent">
	<div class="box1">1</div>
	<div class="box2">2</div>
	<div class="box3">3</div>
	<div class="box4">4</div>
	<div class="box5">5</div>
</div>

.box1 {
    width: 150px;
    height: 150px;
    background: lightcoral;
}

.box2 {
    width: 150px;
    height: 150px;
    background: lightgray;
}

.box3 {
    width: 150px;
    height: 150px;
    background: lightyellow;
}

.box4 {
    width: 150px;
    height: 150px;
    background: lightgreen;
}

.box5 {
    width: 150px;
    height: 150px;
    position: relative;
     background: lightcyan;
}


/* 定位 */

.parent {
    width: 450px;
    height: 450px;
    border: 1px dashed #ccc;
    position: relative;
}

.box1 {
    position: absolute;
    left: 150px;
}

.box2 {
    position: absolute;
    top: 150px;
}

.box3 {
    position: absolute;
    top: 150px;
    left: 150px;
}

.box4 {
    position: absolute;
    top: 150px;
    left: 300px;
}

.box4 {
    position: absolute;
    top: 150px;
    left: 300px;
}

.box5 {
    position: absolute;
    top: 300px;
    left: 150px;
}