5.1 绝对定位和相对定位

定位是指设定元素的位置。
定位主要有四种方式，首先介绍相对定位
定位有四个方向的设定，上下左右:
top
bottom
left
right
1.相对定位relative
相对定位是指元素相对于兄弟元素的偏移。这里我们可以看到（第7行代码），left:30px;top:20px,相对于兄弟元素距离左边偏移30像素，距离上20像素
<style>
div.test{
    width:200px;
    height:150px;
    display:inline-block;
    border:1pxsolid#ccc;
}
</style>
<div class="test" style="background:#6CF">
    框1
</div>
<div class="test" style="position:relative;left:30px;top:20px">
    框2
</div>
<div class="test">
    框3
</div>
效果图如下：
绝对定位 absolute
绝对定位的上下左右，是相对于它的父元素的偏移。
<style>
div.test{
    width:200px;
    height:150px;
    display:inline-block;
    border:1pxsolid#ccc;
}
</style>
<div class="test" style="background:#6CF">
    框1
</div>
<div class="test" style="position:absolut;left:30px;top:20px">
    框2
</div>
<div class="test">
    框3
</div>
如果第7行的定位改成了aboslute，那么效果就如下所示：