浅谈position: absolute和position:relative
一、在此先说一下文档流的概念：
1，文档流定义：
百度百科定义：文档流是文档中可显示对象在排列时所占用的位置。
大多网友的理解：元素的位置由元素在 (X)HTML 中的位置决定。将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流.
2，css定位机制：
普通流：普通流就是正常的文档流，在HTML里面的写法就是从上到下，从左到右的排版布局。
浮动：float(left/right)
定位：position(static/relative/absolute)
我的总结和理解：文档流就是没有使用float和position:absolute的元素，(position:relative也会使元素脱离文档流，但是它以前所在地位置还会占用空间，下面的元素不能挤上来)，使用了float和position:absolute的元素会脱离文档流，后面的元素会占用它们的位置。
例1，使用float的例子：
未使用前核心代码：
</head>
<style type="text/css">
div{ background:#C30; width:50px; height:50px; margin:10px; }
</style>
</head>
<body> <div class="ad">1</div> <div>2</div> <div>3</div> </body>
效果图如下所示
给编号为1的方框使用float:left，核心代码如下：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
div{
background:#C30;
width:50px;
height:50px;
margin:10px;
}
.ad{
float:left;
}
</style>
</head>
<body>
<div class="ad">1</div>
<div>2</div>
<div>3</div>
</body>
</html>
效果图如下所示：
我们可以看到，方框1覆盖了方框2，这就是方框1使用float后脱离文档流的效果，它不再占用空间，然后方框2就挤上去了。
例2，使用position:absolute使元素脱离文档流例子的核心代码如下：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
div{
background:#C30;
width:50px;
height:50px;
margin:10px;
}
.ad{
position:absolute;
top:100px;
left:100px;
}
</style>
</head>
<body>
<div class="ad">1</div>
<div>2</div>
<div>3</div>
</body>
</html>
带来的效果图如下：
我的总结体会：
1号方框使用position:absolute绝对定位后脱离文档流，不再占用空间，到这里我个人觉得脱离文档流的元素可以以为它是和这个页面无关，独立出来在一个新的页面排版，然后显示到以前这个页面的上面，覆盖它，各排版各的。而position:relative也会脱离出来排版，但是区别是它还站着以前的空间，如果1方框是relative元素，2，3号方框就不能挤上来。
3，position:absolute应用：
absolute是绝对定位，只有给它top,left,right,bottom当中至少一个赋值，它才会生效。例如下面才会生效
.ad{
position:absolute;
top:100px;
left:100px;
}
这里的top，left都是相当于该元素的父元素的，包含它的元素如果含有position:relative，那么这个就是它的父元素，如果没有，那么body就是它的父元素，定位就从浏览器左上角开始。
