练习

完成如图所示案例

Html页面具体实现
    
     //最外边的边框
     
      
       
        5
       
       
      
     
复制代码
    

CSS样式显示

.div{    width:500px;    height:500px;    //父类用的定位是相对定位    position:relative;    background-color:#` 667766;    top:150px;    left:300px;}.img{    width:25px;    height:25px;    //子类用绝对定位    position:absolute;    bottom:0px;    left:270px;}.div1{    width:300px;    height:200px;    background-color:red;    position:absolute;    top:50px;    left:100px;}.div2{    width:30px;    height:20px;    border-radius:30px/20px;    background-color:blue;    color：white;    text-align:center;    position:absolute;    top:-5px;    left:-5px;    line-height:20px;}复制代码

总结：在于父div用相对定位，子div用绝对定位，便可以完成案例