<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS--Position</title>
<style>
#box1{
/*position:relative;*//*由于父级没有position定义，box1就以页面的左上角为参照点*/
width:200px;
height:100px;
background-color: #0C0;
padding:10px;
}
#box{
position:relative;/*由于父级没有position定义，box就以页面的左上角为参照点*/
width:200px;
height:100px;
background-color: #000;
padding:10px;
top:50px;
left:100px;
}
#boxb{
position:relative;/*由于父级没有position定义，box1就以页面的左上角为参照点*/
width:400px;
height:200px;
background-color: #F0F;
padding:10px;
top:50px;
left:100px;
}
#first{
position:absolute;/*相对于最近的，有position定义的，父级元素box1的，左顶点，为参照点*/
top:0px;
left:0px;
width:120px;
background-color: #60F;
}
#second{
position:relative;/*本对于紧挨着的，父级(box1)的，正文(box有padding定义)的，左顶点，为参照点*/
top:10px;
left:10px;
width:120px;
background-color: #00F;
}
</style>
</head>
<body>
<div id="box">Box正文1
</div>
<div id="boxb">
<div id="box1">Box正文2
<div id="first">First</div>
<div id="second">Second</div>
</div>
</div>
<div style="position:relative; top:50px; left:100px;">
<p >总结</p>
<p> relative:相对于正常位置的偏移，只是偏移，自己原来的位置还在，偏移不占位置</p>
<p> absolute:相对于父类position的左上角位置的偏移，如果没有父类，侧以body的左上角位置为起点，不在文档流，就是没有自己的位置</p>
</div>
</body>
</html>