CSS Code复制内容到剪贴板
.div-3 {
position: absolute;
left:0;
top:0;
}
下面分几个情况来说明上图的意思：
1、div-1与div-2都没有设置“position:relative”，此时我们的div-3绝对定位后就漂到了上图中“div-3c”的位置上；
2、现在我们在div-2元素中加设置一个“position: relative”，此时我们的div-3绝对定位后就漂到了上图中的“div-3a”的位置;
3、接下来把相对定位的设置换到div-1元素上，此时div-3绝对定位后就到了div-3b的位置。
花这么多心思，我只想说明一点：如果一个元素绝对定位后，其参照物是以离自身最近元素是否设置了相对定位，如果有设置将以离自己最近元素定位，如果没有将往其祖先元素寻找相对定位元素，一直找到html为止。这句话说起起来好像有点拗口，不知道大家能否明白我说的是什么？如果不明白大家可以参考上图或者下面这个实例效果：
回到上面的实例中，如果我们在“div-1”加一个“relative”：
CSS Code复制内容到剪贴板
#div-1 {
position:relative;
}
#div-1a {
position:absolute;
top:0;
rightright:0;
width:200px;
}
现在我们相对点不在是第三步中的body了，而是“div-1”了，大家看看与第三步的变化：
第五步：relative和absolute实现布局效果
这一步只要想演示一下使用相对定位和绝对定位实现的两例布局。在前面的基础上，div-1进行相对定位，而div-1a和div-1b进行绝对定位，从而实现两列布局的效果：
CSS Code复制内容到剪贴板
#div-1 {
position:relative;
}
#div-1a {
position:absolute;
top:0;
rightright:0;
width:200px;
}
#div-1b {
position:absolute;
top:0;
left:0;
width:200px;
