相对定位和绝对定位的学习

相对定位

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;
}
效果是

相对定位：是相对于元素本来的位置，以本来的位置为参照物来移动，不脱离文档流，保留元素原来的位置。

绝对定位

2个DIV如下图

.main{
width:500px;
height:500px;
background-color: red;
margin-left:100px;

}

.left{
width:100px;
height:100px;
background-color: blue;

}

给蓝色div一个绝对定位
.main{
width:500px;
height:500px;
background-color: red;
margin-left:100px;

}

.left{
width:100px;
height:100px;
background-color: blue;
position:absolute;left:1px;

}
此时定位是以body作为参照物的，效果如下：

而当给父标签一个position定位时
.main{
width:500px;
height:500px;
background-color: red;
margin-left:100px;
position:absolute;
}

.left{
width:100px;
height:100px;
background-color: blue;
position:absolute;left:1px;
}

蓝色div回到了父元素里，以父元素作为参照物了，效果如下：

绝对定位是元素以参照物为参照进行偏移，是元素脱离文档流，原来的位置由其他元素所占据，参照物为上级有定位属性的元素，一级一级往上找到有定位属性的祖先元素位置，如果没有，则以页面为参照物。