相对定位的学习

3个div，给3个颜色

style:
#div1{
width:100px;
height:100px;
background-color: red}
#div2{
width:100px;
height:100px;
background-color: blue}
#div3{
width:100px;
height:100px;
background-color: yellow}

修改了div2蓝色div的位置:
#div2{
width:100px;
height:100px;
background-color: blue;
margin-left:100px;
margin-top:100px;}

现在使用相对定位修改div2的位置
#div2{
width:100px;
height:100px;
background-color: blue;
margin-left:100px;
margin-top:100px;
position:relative;
right:100px;
bottom:100px;
}

效果是

再次修改
#div2{
width:100px;
height:100px;
background-color: blue;
margin-left:100px;
margin-top:100px;
position:relative;
top:100px;
}
效果是

相对定位：是相对于元素本来的位置，以本来的位置为参照物来移动，并保留元素原来的位置。