定位初步学习

<style>
    .box{
        width: 320px;
        height: 320px;
        border:2px solid red;
    }
    .box a{
        display: block;
        width: 100px;
        line-height: 100px;
        text-align: center;
        color:#fff;
        text-decoration: none;
        background-color: #FF87FD;
        position: absolute;
    }
    .box a:nth-child(1){
        top:20px;
        left:20px;
        
    }
    .box a:nth-child(2){
        top: 20px;
        left:220px;
        
    }
    .box a:nth-child(3){
        left: 20px;
        top:220px;
        
    }
    .box a:nth-child(4){
        left:220px;
        top:220px;
        
    }
    .box a:nth-child(5){
        left:120px;
        top:120px;
        
    }
    
   
    /* 前面几个div相对自身移动之后，位置仍让保留
    所以后面的div没有覆盖他们的位置 */
</style>