定位：相对定位和绝对定位

HTML

<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>

CSS

#father {
    width: 300px;
    border:1px #666 solid;
    padding:0;
    position: relative;
}
#first {
    background-color:#f2bb6f;
    border:1px #B55A00 dashed;


}
#second {
    background-color:#003580;
    border:1px #0000A8 dashed;
    position: relative;
    bottom: 20px;


}
#third {
    background-color:#f3f3f3;
    border:1px #395E4F dashed;
    position: absolute;
    right: 30px;

}

总结：相对定位不会去除其在父类中的位置 绝对定位会去除在父类中的位置
相对定位是以自身左上角为原点
绝对定位可以以父类为基点需要为父类添加相对定位。

绝对定位
使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素” 为基准进行偏移
如果没有已经定位的祖先元素，会以浏览器窗口为基准进行定位
绝对定位的元素从标准文档流中脱离，这意味着它们对其他元素的定位会造成影响
元素位置发生偏移后，它原来的位置不会被保留下来

相对定位元素的规律
设置相对定位的盒子会相对它原来的位置，通过指定偏移，到达新的位置。
设置相对定位的盒子仍在标准文档流中，它对父级盒子和相邻的盒子都没有任何影响。设置相对定位的盒子原来的位置会被保留下来