20.绝对定位

.box{
    width: 500px;
    height: 300px;
    border: solid;
    margin:50px auto;
    position: relative;
}
.sub-box{
    width: 100px;
    height: 100px;
}
.bgc1{
    background-color: darkorange;
}
.bgc2{
    background-color: blue;
}
.bgc3{
    background-color: firebrick;
}
.bgc4{
    background-color: aqua;
}
.bgc5{
    background-color: blueviolet;
}
.po4{
    position:absolute;
    left: 400px;
    top:  200px;
}
.po5{
    position:absolute;
   /* left: 400px;*/
    top:  200px;
}
.po2{
    position:absolute;
    left: 400px;
    top:  0px;
}
.po3{
    position: absolute;
    left: 200px;
    top:  100px;
}

<!--绝对定位和相对定位一般配合使用-->
<!--父元素开启相对定位，子元素开启绝对定位，这样的话改变页面大小后也不会块元素错乱-->
<div class="box">
    <div class="sub-box bgc1"></div>
    <div class="sub-box bgc2 po2"></div>
    <div class="sub-box bgc3 po3"></div>
    <div class="sub-box bgc4 po4"></div>
    <div class="sub-box bgc5 po5"></div>
</div>