绝对定位
先看以下代码
<html>
<head>
<style type="text/css">
#parent{
width:500px;
height:500px;
background:red;
}
#child{
width:250px;
height:250px;
background:#FFFF00;
}
</style>
</head>
<body>
<div id="parent"><div id="child"></div></div>
</body>
</html>
效果
当设置child的div改为绝对定位后
<html>
<head>
<style type="text/css">
#parent{
width:500px;
height:500px;
background:red;
}
#child{
width:250px;
height:250px;
background:#FFFF00;
position:absolute;
top:10px;
left:10px;
}
</style>
</head>
<body>
<div id="parent"><div id="child"></div></div>
</body>
</html>
效果
当父div没设置绝对定位时，子绝对定位是相对于浏览器左上角坐标，当时当父div设置了绝对或者相对定位后，效果如下
<html>
<head>
<style type="text/css">
#parent{
width:500px;
height:500px;
background:red;
position:absolute;
}
#child{
width:250px;
height:250px;
background:#FFFF00;
position:absolute;
top:10px;
left:10px;
}
</style>
</head>
<body>
<div id="parent"><div id="child"></div></div>
</body>
</html>
absolute（绝对定位）和 relative（相对定位）
【position:absolute】 意思是：绝对定位，他默认参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位。 绝对定位具有以下属性：
1、如果没有TRBL，以父级的左上角，在没有父级的时候，他是参照浏览器左上角,如果在没有父级元素的情况下，存在文本，则以它前面的最后一个文字的右上角为原点进行定位但是不断开文字，覆盖于上方。
2、如果设定TRBL，并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定。
3、如果设定TRBL，并且父级设定position属性(无论是absolute还是relative)，则以父级的左上角为原点进行定位，位置由TRBL决定。即使父级有Padding属性，对其也不起作用，说简单点就是：它只坚持一点，就以父级左上角为原点进行定位，父级的padding对其根本没有影响。
以上三点可以总结出，若想把一个定位属性为absolute的元素定位于其父级元素内，必须满足两个条件：
设定TRBL
父级设定Position属性
上面的这个总结非常重要，可以保证各位在用absolute布局页面的时候，不会错位，并且随着浏览器的大小或者显示器分辨率的大小，而不发生改变。
相对定位
<html>
<head>
<style type="text/css">
#parent{
width:500px;
height:500px;
background:red;
}
#child{
width:250px;
height:250px;
background:#FFFF00;
position:relative;
top:10px;
left:10px;
}
</style>
</head>
<body>
<div id="parent"><div id="child"></div></div>
</body>
</html>
效果
padding属性加上后，设置相对定位的子div会padding高宽度加上top或left度数，就像以下这样
<html>
<head>
<style type="text/css">
#parent{
width:500px;
height:500px;
background:red;
padding:20px;
}
#child{
width:250px;
height:250px;
background:#FFFF00;
position:relative;
top:10px;
left:10px;
}
</style>
</head>
<body>
<div id="parent"><div id="child"></div></div>
</body>
</html>
相对定位和绝对定位的不同点
1、如果没有TRBL，以父级的左上角，在没有父级的时候，他是参照浏览器左上角(到这里和absolute第一条一样)，如果在没有父级元素的情况下，存在文本，则以文本的底部为原始点进行定位并将文字断开(和absolute不同)。
2、如果设定TRBL，并且父级没有设定position属性，仍旧以父级的左上角为原点进行定位(和absolute不同)
3、如果设定TRBL，并且父级设定position属性(无论是absolute还是relative)，则以父级的左上角为原点进行定位，位置由TRBL决定(前半段和absolute一样)。如果父级有Padding属性，那么就以内容区域的左上角为原点，进行定位(后半段和absolute不同)。
以上三点可以总结出，无论父级存在不存在，无论有没有TRBL，均是以父级的左上角进行定位，但是父级的Padding属性会对其影响。
综合上面对relative的叙述，我们就可以将position属性为relative的div视成可以用TRBL进行定位的普通div，或者说只要将我们平时布局页面的div的CSS属性中加上position:relative后，就不只是用float布局页面了，还可以用TRBL进行布局页面了，再或者说加上position:relative的div也可以像普通的div进行布局页面了，只不过还可以用TRBL进行布局页面。
总结：如果用定位来布局页面，父级元素的position属性必须为relative，而定位于父级内部某个位置的元素，最好用absolute，因为它不受父级元素的padding的属性影响，当然你也可以用relative，计算的时候不要忘记计算padding的值。